Javascript, получающий индекс элемента DOM

Question

Можете ли вы помочь мне с методом, чтобы найти идентификатор кнопки DOM нажал

out=document.getElementsByClassName("mybutton")
HTMLCollection(2) [button.mybutton, button.mybutton]
0
:
button.mybutton
1
:
button.mybutton
length
:
2
__proto__
:
HTMLCollection

Answer 1

Если ваши кнопки выглядят примерно так,

<button type="button" id="save" class="button">Save</button>
<button type="button" id="cancel" class="button">Cancel</button>

Вы можете прослушать события нажатия на кнопку и получить ее идентификатор, используя event.target.id

function handleClick(event) {
  console.log(event.target.id);  // prints the id of the clicked button
}

document.querySelectorAll(".button").forEach(function(button) { 
  button.addEventListener('click', handleClick);
});

ES6 подход:

const buttons = document.querySelectorAll(".button");
Array.from(buttons, button => button.addEventListener('click', () => {
    console.log(button.id) // prints the id of the clicked button
}));

Answer 2

Добавьте обработчик клика к кнопкам с помощью buttonElement.addEventListener('click', clickHandlerFunction);.

function onMyButtonClick(clickEvent) {
  var button = clickEvent.target;
  console.log('ID of clicked button: ' + button.id);
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.mybutton').forEach(function (button) {
    button.addEventListener('click', onMyButtonClick);
  })
});

<button id="button-1" class="mybutton" type="button">Button 1</button>
<button id="button-2" class="mybutton" type="button">Button 2</button>

Answer 3

1. Выберите все кнопки в документе.
2. Используйте для или forEach для перебора списка кнопок и добавления прослушивателя событий для каждой из кнопок.
3. Используйте метод getAttribute () дляполучить конкретный атрибут элемента (например, «id»).

html:

<button class="mybutton" id ="one">1</button>
<button class="mybutton" id="two">2</button>
<button class="mybutton" id="three">3</button>

javascript:

let myButtons = document.getElementsByClassName("mybutton");

for (let i = 0; i < myButtons.length; i++) {
  myButtons[i].addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
}

Мы также можем использовать метод forEachно поскольку document.getElementsByClassName возвращает HTMLCollection , а не массив, с ES6 Array.from () или spread , который создает массивы из объектов, подобных массиву, мы можемиспользуйте метод forEach для перебора объектов HTMLColection.подробности в здесь

[...myButtons].forEach(function(button) {
  button.addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
});

Или вы можете использовать document.querySelectorAll (), который возвращает NodeList вместо document.getElementsByClassName ().

let myButtons = document.querySelectorAll(".mybutton");

myButtons.forEach(function(button) {
  button.addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
});

Answer 4

Просто используйте цикл for, а затем проверьте атрибут этого элемента:

<button onClick="buttonClick($event)" id="something1" class="mybutton"></button>
<button id="something2" class="mybutton"></button>
<button id="something3" class="mybutton"></button>

function buttonClick(event) {
 for(var i = 0; i < out.length; i++) {
  if (event.target.attribute[0] === out[i].attributes[0].value){ 
  do something}
 }
}

это если вам нужно что-то проверить, но функция щелчка наедине с событием проверит, какая кнопка нажата.