How to set a dynamic JavaScript array with HTML elements and then set an Attribute to them

Question

I am new to JavaScript and StackOverflow. I am trying to extract all he button elements from a page and then set an onclick attribute to them I have tried the following but it does not seem to work any help would be appreciated.

   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);

In the console I get:

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

I have tried a number of different things, if I remove the .setAttribute from the code I get:

    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)

Please help, sorry if this question has been asked before, but I couldn't find an answer.

score 2 · Answer 1 · answered Aug 01 '17 at 11:22

document.getElementsByTagName returns an array-like HTMLCollection. No need for this.document, by the way. Just use document.

Iterate over this collection and bind event listeners using 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

The snippet above requires a function called btnClick, which is called whenever one of the buttons is clicked.

Thank you for the quick reply this works exactly as I wanted — Stephen Levenson, Aug 01 '17 at 11:33

Suresh Atta · Accepted Answer · 2017-08-01T11:34:58.560

1

You have several syntax errors.

1) Array indeces should start from 0. Not with -1.

2) Your btn array is empty which shouldn't be.

3) You should access the current element with index. Not with 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);

With complete code it should

 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>

edited Aug 01 '17 at 11:34

answered Aug 01 '17 at 11:18

Suresh Atta

120,458
37
198
307

There is no need to assign the btn[i] inside the loop. In fact it is more or less a lucky coincidence that doing so does not put unwanted stuff in the btn array. – Peter B Aug 01 '17 at 11:33
@PeterB Yes. There is no need to do that. As they are references anyway. – Suresh Atta Aug 01 '17 at 11:35
Not because the are references, but because `HTMLCollection`s are *live* and can't be modified from outside. Anyway, it's better to use `addEventListener`. – PeterMader Aug 01 '17 at 11:39
@PeterMader That is what a reference mean. And It would be great how using addEventListener good than `onclick` attribute. – Suresh Atta Aug 01 '17 at 11:40
Take a look at [this](https://stackoverflow.com/a/11742769/5989584) and [this](https://stackoverflow.com/a/6348597/5989584) SO answers. There are many reasons not to use inline event handlers. – PeterMader Aug 01 '17 at 12:14

How to set a dynamic JavaScript array with HTML elements and then set an Attribute to them

2 Answers2