How to reference an element's id based on looping through elements by class name

Question

I have a javascript object with an event listener on a bunch of elements based on class name. Each one of these elements has an id, which I will use in other functions in my object. Right now, all I'm trying to do is get the id to print out in the console. I'm having trouble gaining access to these ids. My code is structured like below:

HTML

<div class="class-name" id="one"  >Element 1</div>
<div class="class-name" id="two"  >Element 2</div>
<div class="class-name" id="three">Element 3</div>

Javascript

window.onload = function() {
     object.eListener();
}

var object = {
    info : document.getElementsByClassName('class-name'),

    eListener : function() {
        var className = this.info;

        for (var i = 0; i < className.length; i++) {
            className[i].addEventListener('click', function() {
                console.log(document.getElementsByClassName[i].id);
            });
        }
    }
}

When the divs with the event listeners are clicked, console is logging undefined. I've tried just logging the element without referencing the id, and replacing all of the className variables with document.getElementByClassName, but that did not seem to work either.

How do I print the ids of the elements with the class class-name? Just to note in advance, I will not be using jQuery for this.

Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — nem035, Aug 17 '16 at 16:00
While the code you show is a classic example of the "handler in a loop" problem when using `var` for variables, the typical answer to that problem isn't needed here since you *seem* to want the bound element. So the more appropriate solution is to use `this` instead of trying to get the element with the `i` that you closed over. — , Aug 17 '16 at 16:00
A better duplicate would be one that asks how to reference the bound element in a handler. — , Aug 17 '16 at 16:02
`this.info` is an array of elements. You are later using those elements as indices. Is that the problem? — Nate, Aug 17 '16 at 16:05
...and `document.getElementsByClassName[i]` is wrong either way. You probably were trying to do `console.log(className[i])`. — , Aug 17 '16 at 16:06

score 2 · Answer 1 · answered Aug 17 '16 at 16:08

2

If the class name is always the same then this works

var info = document.getElementsByClassName('class-name');

for (i = 0; i <info.length; i++){

    console.log(info[i].id);

}

answered Aug 17 '16 at 16:08

menix

168
1
1
7

score 2 · Accepted Answer · answered Aug 17 '16 at 16:13

The following should help:

HTML

<div class="class-name" id="one"  >Element 1</div>
<div class="class-name" id="two"  >Element 2</div>
<div class="class-name" id="three">Element 3</div>

JS

window.onload = function() {
  object.eListener();
}

var object = {
    info : document.getElementsByClassName('class-name'),

    eListener : function() {
        var className = this.info;

        for (var i = 0; i < className.length; i++) {
            className[i].addEventListener('click', function() {
                console.log(this.id);
            });
        }
    }
}

Example FIDDLE

Works as intended! So simple, I thought I tried this already (no pun intended). — aCarella, Aug 17 '16 at 16:29

score 1 · Answer 3 · 2016-08-18T12:06:04.490

1

It's near to work,

console.log(this.id);

If you want to use i in this scope you can create/execute a anonymous function passing i as parameter.

for (var i = 0, len = className.length; i < len; i++) (function(i) {
    className[i].addEventListener('click', function() {
        console.log(className[i].id);
    });
})(i);

edited Aug 18 '16 at 12:06

answered Aug 17 '16 at 16:09

How to reference an element's id based on looping through elements by class name

3 Answers3