Is there a way to select index of an array element on click?

Question

I'm struggling about selecting a particular index of an element inside an array on click. Here's that peace of code and thanks in advance!

<div>

 <span class="dot"></span>
 <span class="dot"></span> -- lets say we click on this span
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

</div>



var dots = document.querySelectorAll(".dot");
for(var i = 0; i < dots.length; i ++){
dots[i].addEventListener("click", function(){
console.log(this) -- prints the actual html <span class="dot"></span>

// ?? How to print index of an element? To be more specific, in this case 
just "1" ??

})
}

Ori Drori · Answer 1 · 2019-10-20T14:02:48.000

2

Since you add an event listener to each element, you can console.log the value of i.

Note: I use let i and not var i inside the for loop because the let make i scoped to the blocked, and this preserves the current i value inside the event handler.

const dots = document.querySelectorAll(".dot");
for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener("click", function() {
    console.log({ i });
  })
}

<div>

  <span class="dot">1</span>
  <span class="dot">2</span>
  <span class="dot">3</span>
  <span class="dot">4</span>
  <span class="dot">5</span>

</div>

edited Oct 20 '19 at 14:02

answered Oct 20 '19 at 13:51

Ori Drori

183,571
29
224
209

1

You might want to explain that a crucial difference between your and the OP's code is the use of `let` not `var`, and why your answer will work only with the former. – Mitya Oct 20 '19 at 13:59
Right you are @Utkanos. – Ori Drori Oct 20 '19 at 14:03

treecon · Accepted Answer · 2019-10-20T14:05:04.837

2

One way to achieve this is by adding a property (I named it dotIndex) to your dots and then console.log this property.

var dots = document.querySelectorAll(".dot");

for(var i = 0; i < dots.length; i ++){
    dots[i].dotIndex = i;
    dots[i].addEventListener("click", function(){
        console.log(this.dotIndex);
    })
}

Check the fiddle: https://jsfiddle.net/254uqtm0/

However, as Ori Drori suggested, you can just change var to let in your loop and it will work. If you are confused why, check this thread: What's the difference between using "let" and "var"?

edited Oct 20 '19 at 14:05

answered Oct 20 '19 at 13:54

treecon

2,415
2
14
28

1

Be aware that when doing this, you’ll need to update the indexes if the number of dots change – Tanner Oct 20 '19 at 13:57
Thank you all guys! And special thanks to you! Custom property didn't even crossed my mind. All the best! :) – bvlajkov Oct 20 '19 at 21:31

KooiInc · Answer 3 · 2019-10-20T14:17:15.367

Yo need only one event listener (event delegation). The handler can iterate through the existing elements and do something with the index of it. Something like:

const log = (...things) => { 
  console.clear(); 
  things.forEach(thing => console.log(thing))
};

// iterate within the handler
document.addEventListener("click", showIndex);

// alternative: add a dataset value to the elements on page load
// and make the handler do something with that. This is static and
// can't be used if the number of .dott-elements changes dynamcally
Array.from(document.querySelectorAll(".dott")).forEach( (el, i) => el.dataset.index = i);
document.addEventListener("click", alternativeShowIndex);

function showIndex(evt) {
  if (evt.target.matches(".dot")) {
    let currentDot = {};
    const allDots = Array.from(document.querySelectorAll(".dot"));
    for (let i = 0; i < allDots.length; i += 1) {
      if (allDots[i] === evt.target) {
        currentDot = {index: i, text: allDots[i].textContent};
        break;
      }
    }
    log(currentDot);
  }
}

function alternativeShowIndex(evt) {
  evt.target.matches(".dott") && log(evt.target.dataset.index);
}

<div>
 <span class="dot">first</span>
 <span class="dot">second</span>
 <span class="dot">third</span>
 <span class="dot">fourth</span>
 <span class="dot">fifth</span>
</div>

<div>
 <span class="dott">alt-first</span>
 <span class="dott">alt-second</span>
 <span class="dott">alt-third</span>
 <span class="dott">alt-fourth</span>
 <span class="dott">alt-fifth</span>
</div>

You can use `event.target.matches('.dot')` instead of `evt.target.classList.contains("dot")`. — Ori Drori, Oct 20 '19 at 14:16
@OriDrori Sure, changed it. Although `classList.contains` may be more self explanatory. — KooiInc, Oct 20 '19 at 14:21
Whatever works for you. I prefer `matches` because it's useful to wider range of selector when using event delegation. — Ori Drori, Oct 20 '19 at 14:23

score 1 · Answer 4 · answered Oct 20 '19 at 14:01

1

You can do something like this

const spans = [...document.getElementsByClassName('dot')];
spans.forEach(i => i.addEventListener('click', () => console.log(spans.indexOf(i))));

answered Oct 20 '19 at 14:01

Abito Prakash

4,368
2
13
26

shrikantbishoye · Answer 5 · 2019-10-20T14:26:29.380

0

You can do like this

var dots = [...document.getElementsByClassName('dot')];

for (let i=0; i<dots.length; i++) {
 dots[i].addEventListener("click", () => {
   console.log(i);
  });
}

<div>
   <span class="dot">0</span>
   <span class="dot">1</span> 
   <span class="dot">2</span>
   <span class="dot">3</span>
   <span class="dot">4</span>
</div>

edited Oct 20 '19 at 14:26

answered Oct 20 '19 at 14:19

shrikantbishoye

781
6
6

Is there a way to select index of an array element on click?

5 Answers5