Div element undefined for addEventListener inside loop

user_14808455 0
Viewed 288

Here is the HTML and JS code:

let sides = document.getElementsByClassName("sides");

for (var i=0;i<sides.length;i++){
    console.log(sides[i].innerHTML);  // top left 
    sides[i].addEventListener("click", function(){
        console.log(sides[i]);  //Undefined
    })
}
<div class="sides">top</div>
<div class="sides">left</div>

When I console.log(sides[i]) I'm getting the div elements but when I'm adding the addEventListener it's showing undefined.

Please someone help.

addeventlistener dom javascript
3 Answers

Change sides[i] to this so that it can refer to the clicked element itself. The reason your solution doesn't work is because your variable i gets incremented to 2 after the last iteration because of i++. So when the event listener is triggered, sides[i] is now sides[2]. Another way is to instantiate the i using let as let i = 0, then you can access sides[i]

<div class="sides">top</div>
<div class="sides">left</div>


<script>
    let sides = document.getElementsByClassName("sides");

    for (let i=0;i<sides.length;i++){
        console.log(sides[i].innerHTML);  // top left 
        sides[i].addEventListener("click", function(){
            console.log(this);
            console.log(sides[i])
        })
    }
</script>

user_64808030

You can also console.log e.target

<div class="sides">Top</div>
<div class="sides">Left</div>

<script>
    let sides = document.getElementsByClassName("sides");

    for (let i=0;i<sides.length;i++){
        console.log(sides[i].innerHTML);  // top left 
        sides[i].addEventListener("click", function(e) {
            console.log(e.target);
        })
    }
</script>
user_135241860

You can also assign an onclick() method to the element like below, but inside of the function you would still refer to the element with this so that console.log() knows which element's innerHTML you are trying to print. In this case it's own.

let sides = document.getElementsByClassName("sides");

for (var i=0; i<sides.length; i++) {
    console.log(sides[i].innerHTML);  // top left 
    sides[i].onclick = function() {
        console.log(this.innerHTML);  // Not undefined
    };
}
<div class="sides">top</div>
<div class="sides">left</div>

Or you could also create a function to handle the click event, in which case you would again use this to refer to the clicked element:

function someFunc() {
  console.log(this.innerHTML);  // Not undefined
}

let sides = document.getElementsByClassName("sides");

for (var i=0; i<sides.length; i++) {
    console.log(sides[i].innerHTML);  // top left 
    sides[i].addEventListener("click", someFunc);
}
<div class="sides">top</div>
<div class="sides">left</div>

user_82025890
Related