谁能帮助初学者解释为什么这个简单的 JS 不起作用？
这是一个简单的颜色更改项目，从表面上看它应该可以工作，但要么 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>
javascript
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;
}
翻翻过去那场雪4回答
-
慕姐4208626
最初，当您的脚本导入到 中时<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 -
守候你守候我
它不起作用的原因是你没有太注意你的代码，再次阅读你的教程。我更改的第一个代码您忘记将类添加到主体中，但在 javascript 中您使用查询选择器调用它，而且在 for 循环中您错误地将值替换为 1 递增，最后我发布的代码不起作用我确定，因为您将 javascript 代码复制到 javascript 文件，将 html 复制到 html 文件，并且忘记将 javascript 调用到 html 文件中，因为在我的代码中，如果没有一些错误或者如果在发布之前不会忘记任何事情 -
MYYA
这里for (let i=0; i<6; 1++)把1++改成i++。递增是在 i 变量上完成的，并将在实际值 0 上加 1，然后将其传递给 1addeventlistener中的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> -
隔江千里
我通过在 HTML 的按钮元素上使用 onclick= 并将 JS 分组为一个函数来实现这一工作。这是一种解决方法，但证明代码确实有效。我的 addEventListener 不能直接与上面的代码一起使用是否有原因？
随时随地看视频慕课网APP
相关分类
JavaScript