JavaScriptでクリックしたボックスが何番目なのかを取得して数字を取得したい。

Question

JavaScriptで最低一つからそれ以上のdivタグからなる正方形のボックスを生成します。

例）以下のボックスはJavaScriptで自動生成される。ボックスの数は1〜それ以上でランダムで決められる。各divにはbox1,box2,box3…というid属性と縦横の大きさや、背景色を決めるためのclass属性が振り分けられている。

<div id=“box1” class=“box”>A</div> <div id=“box2” class=“box”>B</div> <div id=“box3” class=“box”>C</div> …

これらのboxをクリックした際に、クリックしたボックスが何番目なのかを取得して、JavaScriptでboxNumにその番号を格納したいのです。

ただ、document.getElementByIdで一つ一つにイベントを不特定多数のボックスに設定していくのは流石に無理があるとなり、路頭に迷っている始末です。

何かいい方法はないでしょうか？

Answer 1

querySelectorAllを使って一括で取得するための目印を付けましょう。(class="box"が使えるならそれでも良し)
下記のコードでclass="box"の要素を一括で取得出来ます。あとは煮るなり焼くなり。

const nodes = document.querySelectorAll(".box");

nodes.forEach((node,index)=>
{
    node.addEventListener("click",evt=>
    {
        console.log(`${index+1}番目のbox`);
    });
});

Answer 2

//1
document.addEventListener ('click', event=> {
  let e = event.target, r = /^box(\d+)$/.exec(e.id);
  if (r)
    alert (r[1]);
  if (e.classList.contains ('box'))
    alert (e.className);
}, false);

//2
let pair = Array.from (document.querySelectorAll ('.box'), (e, i)=> [e, i]);
let map = new Map (pair);
document.addEventListener ('click', event=> {
  let e = event.target;
  if (map.has (e))
    alert (map.get (e));
}, false);

Answer 3

document.addEventListener('click',e=>{
  const t=e.target.closest('.box');
  if(t!==null){
    const idx=[...document.querySelectorAll('.box')].indexOf(t);
    console.log(idx);
  }
});

Answer 4

共通する項目は何なのかを考えてみたらヒントになるかと思います。提示されたコードだけだと、div或いは.boxとなりますが、html全体も関わってくる可能性があるので、あくまで考え方としてお答えしておきます。