JavaScript find index of div

Question

That's my first question here so please don't hate me :) Tried to look for it but I wasn't able to find what I need. How can I print index of div with class .circle that has been clicked? Here's my code

var circle = document.querySelectorAll(".circle");

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

 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(circle.indexOf(this));
 })
}

Thanks!

Answer 1

Make sure you use let in your for loop and just console.log(i)

var circle = document.querySelectorAll(".circle");

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

 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(i);
 })
}

Answer 2

Just a small change: Simply convert the NodeList into an Array ( Arrays have an indexOf function):

 var circle = Array.from(document.querySelectorAll(".circle"));

Try it

Alternatively, you could simply take the index of the iteration:

 var circle = document.querySelectorAll(".circle");

for(let i=0; i<circle.length; i++){
 circle[i].addEventListener("click", function(){
   this.classList.toggle("hide");
   console.log(i);
  })
}