So, I have this html code:

<div class='class1' id='example'>
  <span class='class2'>Some text</span>
  <span class='class3'>Some text 2</span>
 </div>

I want to get every class1 and then add an event listener (click) on class2 and class3 (and I need that id to get some info from a PHP file). I tried something like this:

var yes = document.getElementsByClassName('class1');
for (var i=0 ; i<yes.length;i++)
  yes[i].getElementsByClassName('class2').addEventListener('click',redirectfunction,false);

It's not working. What can I do?!

So, I have this html code:

<div class='class1' id='example'>
  <span class='class2'>Some text</span>
  <span class='class3'>Some text 2</span>
 </div>

I want to get every class1 and then add an event listener (click) on class2 and class3 (and I need that id to get some info from a PHP file). I tried something like this:

var yes = document.getElementsByClassName('class1');
for (var i=0 ; i<yes.length;i++)
  yes[i].getElementsByClassName('class2').addEventListener('click',redirectfunction,false);

It's not working. What can I do?!

• javascript
• php
• html
• subclass
• getelementsbyclassname

Share Improve this question Follow edited Jun 2, 2014 at 3:23 Lord Silver asked Jun 2, 2014 at 2:25 Lord SilverLord Silver 2111 silver badge44 bronze badges 9

• yes.lenght? Perhaps length? Also, getElementsByClassName returns a NodeList, not a single element, so you can't call addEventListener on it. – RobG Commented Jun 2, 2014 at 2:27
• You have mis-spelt lenght, getsElementsByClassName and have a dot rather than a ma in the listener. – Andy G Commented Jun 2, 2014 at 2:27
• is the length typo in your example just a typo in this question? – scunliffe Commented Jun 2, 2014 at 2:27
• It's just a typo, that's not the problem. – Lord Silver Commented Jun 2, 2014 at 2:30
• So, to clarify your question: do you have groups of 3 elements such that within each group you need to add the eventListener 'redirectfunction' to the class2 element within that group? – jithinpt Commented Jun 2, 2014 at 2:33

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

You are probably better to use querySelectorAll as it has wider support than getElementsByClassName (IE 8+) and you can get the elements in one go:

var yes = document.querySelectorAll('.class1 > .class2, .class1 > .class3');

querySelectorAll returns a static NodeList, so iterate over the returned object to access the members.

However, be prepared to provide a fallback for older browsers.

At first getsElementsByClassName should be getElementsByClassName (if not a typo) and then yes[i].getElementsByClassName('class2') returns a HTMLCollection of found elements and you are using this:

yes[i].getElementsByClassName('class2')
      .addEventListener('click',redirectfunction,false);

So, you are trying to add an event listener on a collection. You may use another loop if there are multiple elements or just use something like this:

yes[i].getElementsByClassName('class2')[0]
      .addEventListener('click',redirectfunction,false);

Update: (Example)

var els = document.querySelectorAll('div.class1');
for(var i =0, l=els.length; i<l; i++) {
    var cls = els[i].querySelectorAll('span[class^=class]');
    for(var x =0, n=cls.length; x<n; x++) {
        cls[x].addEventListener('click', function(e) {
            redirectfunction.call(this, e, this.parentNode.id);
        }, false);
    }
}

function redirectfunction(e, id) {
    alert('This is id: ' + id);
}