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

構文エラーがいくつかあります。

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>

Answer 2

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と呼ばれる機能を、必要とします。