Question

当按钮不是未定义时，出现“未捕获类型错误：无法设置未定义的属性‘onclick’”

2020-06-12

556

javascript html dom

我遇到了这个错误： 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 。

Balastrong

2020-06-12

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;
    }
 }