"Uncaught TypeError: Cannot set property 'onclick' of undefined"按钮未定义时

Question

我面临此错误：Uncaught TypeError: Cannot set property 'onclick' of undefined，当按钮未定义时。有人可以帮助我找到错误并修复它。我对Javascript比较陌生。HTML，Javascript和输出都包括在内。谢谢 HTML(脚本链接标记不在这里(：

<h1 id="change">Color change</h1>
<button class="color-change" data-colour="green">Green</button>
<button class="color-change" data-colour="red">Red</button>
<button class="color-change" data-colour="blue">Blue</button>

JavaScript

document.addEventListener("DOMContentLoaded", function(){
buttons = document.querySelectorAll(".color-change");
var i;
for(i=0; i<buttons.length; ++i){
let button = buttons[i];
console.log(button);
document.button.onclick = function(){
document.querySelector("#change").style.color = document.buttons[i].dataset.colour;
}
}
});

输出：

<button class="color-change" data-colour="green">Green</button>
index.js:24 Uncaught TypeError: Cannot set property 'onclick' of undefined
at HTMLDocument.<anonymous> (index.js:24)

Answer 1

您无需调用document.即可引用您声明的变量button和buttons。

Answer 2

简单地删除文档并不能解决这个问题。您在按钮 onclick 中使用变量 i，因此无论您单击哪个按钮，它都将始终是最后一个值，因为在单击它时(当代码实际运行时(循环完成。 您需要将其分配给循环中的新变量，如下所示

for(i=0; i < buttons.length; i++){
let button = buttons[i];
//Reaasign to new variable
let ii = i;
button.onclick = function(){
document.querySelector("#change").style.color = buttons[ii].dataset.colour;
}
}