“未捕获的TypeError：当按钮未定义时，无法设置属性'onclick'的未定义”

Question

当按钮没有未定义时，我遇到此错误：Uncaught TypeError: Cannot set property 'onclick' of undefined。有人可以帮我找到错误并进行修复。我对Java比较陌生。 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。