Confusion about onclick function

Question

Beginner JS here, hope anyone could explain this to me.

1) Why does this not work:

var allSpans = document.getElementsByTagName('span');
allSpans.onclick = function() {
 alert('hoo'); 
};

2) or if I have all the innerHTML from spans in an array and I try this:

var allSpans = document.getElementsByTagName('span');
var arrayNumbers = [];

for (var i = 0; i < allSpans.length; i++) {
  var operator = allSpans[i].innerHTML; 
}
arrayNumbers.onclick = function() {
 alert('hoo'); 
};

getElementsByTagName doesn't return one element but a list. – Denys Séguret Nov 28 '13 at 18:58 — Denys Séguret, Nov 28 '13 at 18:58

score 2 · Answer 1 · answered Nov 28 '13 at 18:59

2

onclick is a property of HTMLElementNode objects. getElementsByTagName returns a NodeList. Assigning a property to a NodeList doesn't assign it to every member of that list.
Exactly the same, except you are dealing with an Array instead of a NodeList.

answered Nov 28 '13 at 18:59

Quentin

914,110
126
1,211
1,335

score 1 · Answer 2 · answered Nov 28 '13 at 19:02

1

You have to iterate through the returned list

var allSpans = document.getElementsByTagName('span');

for ( var i = 0; i < allSpans.length; i += 1 ) {
    allSpans[i].onclick = function (event) {
         alert('hoo'); 
    };
}

answered Nov 28 '13 at 19:02

Luketep

181
1
9

Alright, I get it, but in JSlint the error: Don't make functions within a loop. occurs? Is this something to look at or does it not matter? – Mark Nov 28 '13 at 19:05
1

@Marek: It doesn't matter in your example, but it's something you have to aware of. See http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example. – Felix Kling Nov 28 '13 at 19:11

score 0 · Answer 3 · answered Nov 28 '13 at 19:09

To answer your first question, you have to add this on each node instead of the nodeList, which is what you're getting when you call document.getElementsByTagName. What you're looking for is:

for(var i = 0; i < allSpans.length; i++){
  allSpans[i].onClick = function(){
    alert('hoo');
  };
}

You have a similar issue in the second question, except it doesn't appear as if you're actually adding anything to the arrayNumbers array, so even if you looped through that, you wouldn't get the expect events on click.

Confusion about onclick function

3 Answers3