JavaScriptのみでindexを取得したいです。（indexOf）

Question

内容としましては
「indexOf()を使用してクリックした要素が何番目（index）かを取得する挙動」
を実装したいです。

    <ul>
      <li class="test-list">1</li>
      <li class="test-list">2</li>
      <li class="test-list">3</li>
      <li class="test-list">4</li>
      <li class="test-list">5</li>
    </ul>

const tests = document.querySelectorAll(".test-list");
console.log(tests);

let testIndex;

tests.forEach(item => {
  item.addEventListener("click", link => {
    testIndex = [].indexOf.call(tests, item.target);
    console.log(testIndex);
  })
});

上記のコードで行きますと
console.log(testIndex)は「-1」を吐いてしまいます。
こちらのPCではないところで仮にコードを書いて実装してみたら、ちゃんとクリックしたらindexを取得していたので
なぜ…？となってます。。。。
JSは全く同じ記述なのでなおさらなぜとなってます。
どうかよろしくお願いいたします。

Answer 1

testIndex = [].indexOf.call(tests, item.target);

要素にtargetというプロパティを足してないと期待どおりには動かないと思います。

forEach のコールバック関数にインデックスが渡されるので、それを見ればいいんじゃないでしょうか。

tests.forEach((item, testIndex) => {

Comments

[ShojiroAbe]

おしゃる通りでした！そもそも引数で受け取っているので
testIndex = [].indexOf.call(tests, item.target);
↑の記述はいらないですね！ありがとうございます！

Answer 2

item.targetではなくlink.targetですね。

[].indexOf.call(tests, link.target)

Comments

[ShojiroAbe]

すみません！誤字していました！
無事取得できました！

Answer 3

indexを取得したいなら純粋に

const tests = document.querySelectorAll('.test-list')
tests.forEach((item, index) => item.addEventListener('click', () => console.log(index)))

でいいんじゃないでしょうか。

またどうしてもindexOfが使いたいなら、こんな感じじゃないでしょうか。

tests.forEach((item, _, self) => item.addEventListener('click', () => console.log(Array.from(self).indexOf(item))))