javascript - 如何使用 HTML 元素设置动态 JavaScript 数组，然后为其设置属性

Question

我是 JavaScript 和 StackOverflow 新手。我试图从页面中提取所有按钮元素，然后为它们设置 onclick 属性，我已尝试以下操作，但它似乎不起作用，不胜感激。

   var btn = [];
   for (var i=-1; i<btn.length; i++)
       {
           btn[i] =   this.document.getElementsByTagName("button")
             .setAttribute("onClick","btnClick()");
       }
   console.log("array length " + btn.length);
   console.log(btn);

在控制台中我得到:

     script.js:13 Uncaught TypeError: this.document.getElementsByTagName(...)
            .setAttribute is not a function at script.js:13
     (anonymous) @ script.js:13

如果我从得到的代码中删除 .setAttribute，我尝试了许多不同的方法:

    script.js:15 array length 0
    script.js:16 
    [-1: HTMLCollection(13)]
    -1: HTMLCollection(13)
    board:button#board.btn
   edCourse:button#edCourse.btnGray1
   edModule:button#edModule.btnGray1
   edStudent:button#edStudent.btnGray1
   entCourse:button#entCourse.btnGray
   entModule:button#entModule.btnGray
   entStudent:button#entStudent.btnGray
   length:13
   resultLst:button#resultLst.btn
   sap:button#sap.btn
   trans:button#trans.btn
   vwCourse:button#vwCourse.btnGray
   vwModule:button#vwModule.btnGray
   vwStudent:button#vwStudent.btnGray
   0:button#entStudent.btnGray
   1:button#entCourse.btnGray
   2:button#entModule.btnGray
   3:button#edStudent.btnGray1
   4:button#edCourse.btnGray1
   5:button#edModule.btnGray1
   6:button#vwStudent.btnGray
   7:button#vwCourse.btnGray
   8:button#vwModule.btnGray
   9:button#sap.btn
   10:button#board.btn
   11:button#trans.btn
   12:button#resultLst.btn
   __proto__:HTMLCollection
   length:0
   __proto__:Array(0)

请帮忙，抱歉，如果以前有人问过这个问题，但我找不到答案。

Answer 1

document.getElementsByTagName 返回类似数组的 HTMLCollection。顺便说一下，不需要 this.document。只需使用文档即可。

迭代此集合并使用 addEventListener 绑定(bind)事件监听器:

var btn = document.getElementsByTagName("button");
for (var i = 0; i < btn.length; i++) {
  // btn[i] contains the <button> element
  btn[i].addEventListener('click', btnClick);
}
console.log("array length " + btn.length); // logs the number of buttons in the document
console.log(btn); // logs the HTMLCollection

上面的代码片段需要一个名为 btnClick 的函数，只要单击其中一个按钮就会调用该函数。