CODEWITHSUNDEEP
javascriptdomaddeventlistener
Mallik Arjun
Mallik Arjun

Reputation: 85

Div element undefined for addEventListener inside loop

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.

Upvotes: 4

Views: 538

Answers (3)

Ivan86
Ivan86

Reputation: 5708

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>

Upvotes: 0

Abhishek
Abhishek

Reputation: 104

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>

Upvotes: 1

Rifat Bin Reza
Rifat Bin Reza

Reputation: 2761

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>

Upvotes: 2

Related Questions