如何使用HTML元素設置動態JavaScript數組，然后為其設置Attribute

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 。 只需使用document 。

遍歷此集合並使用addEventListener綁定事件偵聽器：

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的函數，只要單擊其中一個按鈕，就會調用該函數。

Answer 2

您有幾個語法錯誤。

1）數組索引應從0開始。 不與-1 。

2）您的btn數組為空，不應為空。

3）您應該使用index訪問當前元素。 沒有this

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

使用完整的代碼，它應該

  var btn = document.getElementsByTagName("button"); for (var i=0; i<btn.length; i++) { btn[i] = btn[i].setAttribute("onClick","btnClick()"); } console.log("array length " + btn.length); console.log(btn); function btnClick(){ alert("clicked"); } 

 <button>b1</button> <button>b2</button>