如何设置一个带有HTML元素的动态JavaScript数组，然后为它们设置一个属性

我是JavaScript和StackOverflow的新手。我试图从页面中提取他所有的按钮元素，然后设置一个onclick属性给他们我已经尝试了以下，但它似乎不工作任何帮助，将不胜感激。如何设置一个带有HTML元素的动态JavaScript数组，然后为它们设置一个属性

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)

请帮帮忙，对不起，如果这个问题之前已经问过，但我找不到答案。

来源

2017-08-01 Stephen Levenson

您有几个语法错误。

1）数组单元应从0开始。不适用于-1。你的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>

来源

2017-08-01 11:18:49

没有必要在循环内部分配btn [i]。事实上，这样做或多或少是一个幸运的巧合，因为这样做并不会将不需要的东西放入btn数组中。 –

@PeterB是的。没有必要这样做。因为无论如何它们都是参考。 –

不是因为引用，而是因为'HTMLCollection's * live *并且不能从外部修改。无论如何，最好使用'addEventListener'。 – PeterMader

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功能，每当点击了按钮中的一个被调用。

来源

2017-08-01 11:22:12 PeterMader

谢谢您的快速回复，这完全符合我的想法 –

如何设置一个带有HTML元素的动态JavaScript数组，然后为它们设置一个属性

回答

相关问题