Укажите текущий класс DOM, используемый в JS?

Question

Я поражен проблемой, когда мне нужно указать текущий номер класса, который я использую в JS. Например, вот мой код:

<div>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction()">Click here</button></p>
</div>

Теперь я знаю, что если я наберу document.getElementsByClassName("child"), он предоставит мне массив со всем возможным использованием упомянутого класса p. Однако я хочу знать точную кнопку, которая была нажата.

Как если бы была нажата вторая кнопка класса p, я хочу, чтобы моя функция возвращала мне число 2. Аналогично, если была нажата третья кнопка, я хочу номер 3 вернулся ко мне. Есть ли какая-то функция для этого? Как мне поступить? Я совершенно новичок в JS.

Answer 1

То, что вы пытаетесь сделать, называется Делегирование события в javascript. Вы просто добавляете прослушиватель событий в родительский элемент, чтобы избежать необходимости добавлять обработчики событий к нескольким дочерним элементам.

e.target дает вам элемент, для которого был вызван обработчик события (здесь щелчок). Вы можете получить информацию об этом элементе, используя различные свойства, например, e.target.textContent дает вам текст кнопки.

const container = document.querySelector(".container")

container.addEventListener('click',(e)=>{
  console.log(e.target)
  console.log(e.target.textContent)
})

<div class="container">
  <p><button type="button">Click here 1</button></p>
  <p><button type="button">Click here 2</button></p>
  <p><button type="button">Click here 3</button></p>
  <p><button type="button">Click here 4</button></p>
</div>

Answer 2

Вы можете l oop по списку элементов, имеющих этот класс, добавить прослушиватель событий для каждого элемента, чтобы вы могли получить обычный доступ к номеру внутри функции. Вот пример:

let childs = document.getElementsByClassName('child');
for(let i = 0; i < childs.length; i++){
      let el = childs[i];
      el.addEventListener('click', function(e){
            console.log(i+1);
      });
}

<div>
     <p class="child"><button type="submit">Click here 1</button></p>
     <p class="child"><button type="submit">Click here 2</button></p>
     <p class="child"><button type="submit">Click here 3</button></p>
     <p class="child"><button type="submit">Click here 4</button></p>
</div>

Answer 3

Вы можете передать this в функцию, которая является текущим элементом.
Я добавил код, чтобы найти все элементы .child, найти индекс, соответствующий родительскому элементу этой кнопки, и затем предупредить об этом.
Я бы порекомендовал использовать addEventListener вместо атрибутов onclick.
В зависимости от того, что вы делаете, я бы порекомендовал добавить data="n" атрибутов, добавленных к элементам DOM, или карту значений объекта. Но это будет работать так:

function myfunction(el){
   const index = Array.from(document.getElementsByClassName('child'))
                      .findIndex(x=>x===el.parentNode);
   alert(index);
}

<div>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
<p class="child"><button type="submit" onclick="myfunction(this)">Click here</button></p>
</div>