can't get index of current clicked element in array using javascript

Question

This is my HTML code

var link = document.getElementsByClassName("link");
for (i = 0; i < link.length; i++) {
  link[i].addEventListener("click", click);

  function click() {
    console.log(link.indexOf(this));
  }
}

<div class="links">
  <ul>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">Home</a>
    </li>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">About</a>
    </li>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">Gallery</a>
    </li>
    <li>
      <div class="hole-counter"><span></span></div><a class="link">Contact</a>
    </li>
  </ul>
</div>

And this is javascript code

i get this error in console Uncaught TypeError: link.indexOf is not a function at HTMLAnchorElement.click (index.html:97)

HTMLCollections are not arrays. you have to convert them to arrays first before you can use array methods on them. — rlemon
– rlemon, Commented Sep 25, 2019 at 18:13
Possible duplicate of Result of `document.getElementsByClassName` doesn't have array methods like `map` defined, even though it is an array — rlemon
– rlemon, Commented Sep 25, 2019 at 18:14
es6 = var link = [...document.getElementsByClassName('link')] or just use Array.from — Chris W.
– Chris W., Commented Sep 25, 2019 at 18:19

JoeT · Accepted Answer · 2019-09-25 18:18:13Z

2

Your link variable is not an Array, therefore you cannot call indexOf() on it. You must first convert link to an array. var link = Array.from(document.getElementsByClassName("link"));

answered Sep 25, 2019 at 18:18

JoeT

444 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abito Prakash · Accepted Answer · 2019-09-25 18:18:33Z

2

The link variable in your code is HTMLCollection, you need to convert it to an array before using indexOf

You can do this

const links = [...document.getElementsByClassName("link")];
links.forEach(link => link.addEventListener("click", click));

function click() {
  console.log(links.indexOf(this))
}

answered Sep 25, 2019 at 18:18

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

Comments

Data Crusader · Accepted Answer · 2019-09-25 18:27:25Z

0

The link variable is an array like element, you need to convert that to an array first:

var link = document.getElementsByClassName("link");
for (i = 0; i < link.length; i++) {
    link[i].addEventListener("click", click);
}

function click() {
    console.log(Array.from(link).indexOf(this));
}

answered Sep 25, 2019 at 18:27

Data Crusader

4341 gold badge4 silver badges14 bronze badges

Comments

arsal khan · Accepted Answer · 2019-09-25 18:33:07Z

0

Your link variable is just a variable and the indexOf function is specifically for arrays. So you should first convert your variable into an array. You can do that by either declaring it as an array or converting it into an array afterwards.

answered Sep 25, 2019 at 18:33

arsal khan

1044 bronze badges

Collectives™ on Stack Overflow

can't get index of current clicked element in array using javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related