这是一个简单的颜色更改项目，从表面上看它应该可以工作，但要么 JS 文件没有加载，要么我犯了一个简单的错误，我无法解决它！任何帮助表示赞赏！这个想法是，您按下按钮，BG 会更改为随机的十六进制颜色，并且文本会更改为十六进制代码。超文本标记语言<!DOCTYPE html><hmtl> <head> <script src="script.js"></script> </head> <body> <h1 id="text">Background Color</h1> <button id="button">Change BG-Color</button> </body></hmtl>javascriptlet button = document.getElementById('button');let text = document.getElementById('text');let body = document.querySelector('body');let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];button.addEventListener('click', colorChange);function colorChange() { let hex = '#'; for (let i = 0; i < 6; i++) { const index = Math.floor(Math.random() * number.length); hex += number[index]; } text.textContent = hex; body.style.backgroundColor = hex;}
4 回答
慕姐4208626
TA贡献1852条经验 获得超7个赞
最初，当您的脚本导入到 中时<head>，它会尝试找到您的按钮，即使它尚未呈现！因此，您需要将脚本放在正文中，或者使用某种机制在准备好的文档上运行脚本。
因此，在正文中使用您的脚本可以解决您的问题 -
let button = document.getElementById('button');
let text = document.getElementById('text');
let body = document.querySelector('body');
let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
button.addEventListener('click', colorChange);
function colorChange() {
let hex = '#';
for (let i = 0; i < 6; i++) {
const index = Math.floor(Math.random() * number.length);
hex += number[index];
}
text.textContent = hex;
body.style.backgroundColor = hex;
}
<!DOCTYPE html>
<html>
<body>
<h1 id="text">Background Color</h1>
<button id="button">Change BG-Color</button>
<script src="script.js"></script>
</body>
</html>
而且，标签中的一个小更新就是hmtl使html
守候你守候我
TA贡献1802条经验 获得超10个赞
它不起作用的原因是你没有太注意你的代码，再次阅读你的教程。我更改的第一个代码您忘记将类添加到主体中，但在 javascript 中您使用查询选择器调用它，而且在 for 循环中您错误地将值替换为 1 递增，最后我发布的代码不起作用我确定，因为您将 javascript 代码复制到 javascript 文件，将 html 复制到 html 文件，并且忘记将 javascript 调用到 html 文件中，因为在我的代码中，如果没有一些错误或者如果在发布之前不会忘记任何事情
MYYA
TA贡献1868条经验 获得超4个赞
这里for (let i=0; i<6; 1++)把1++改成i++。递增是在 i 变量上完成的，并将在实际值 0 上加 1，然后将其传递给 1
addeventlistener中的alert函数在哪里找到
<!DOCTYPE html>
<hmtl>
<head>
<script src="script.js"></script>
</head>
<body>
<h1 id="text">Background Color</h1>
<button id="button">Change BG-Color</button>
<script>
let button = document.getElementById('button');
let text = document.getElementById('text');
let body = document.querySelector('body');
let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
button.addEventListener('click', colorChange); //<-- not alert
function colorChange() {
let hex = '#';
for (var i = 0; i < 6; i++) { //<-- not 1++
const index = Math.floor(Math.random() * number.length);
hex += number[index];
}
text.textContent = hex;
body.style.backgroundColor = hex;
}
</script>
</body>
</hmtl>
隔江千里
TA贡献1906条经验 获得超10个赞
我通过在 HTML 的按钮元素上使用 onclick= 并将 JS 分组为一个函数来实现这一工作。这是一种解决方法，但证明代码确实有效。
我的 addEventListener 不能直接与上面的代码一起使用是否有原因？
添加回答
举报
0/150
提交
取消