Как узнать значение атрибута "name" кнопки в коде html?

Question

Всем привет. У меня есть код страницы сайта на PHP, где через цикл выводится каталог магазина с кнопками "Добавить в корзину". В коде кнопки идентифицируется её имя атрибутом "name" по типу (код не совсем правильный, пытаюсь донести именно принцип):

for ($i=0; $i<$count; ++$i){
        $result = $query('SELECT id FROM table')->fetch();
        echo '<button name=' . $result[i] . '>Добавить в корзину</button>';
}

Теперь мне нужно по нажатию кнопки определять её имя, содержащее идентификатор товара, к которому она привязана, чтобы в дальнешем произвести запросы к БД, добавить в корзину конкретный товар, ID которого соответсвует имени кнопки.

Вопрос: есть ли функция или технология, позволяющая считать имя кнопки (содержимое атрибута "name") по её нажатию?

Answer 1

В Javascript атрибуты html-элементов, как правило, хранятся просто в свойстве этого элемента, то есть достаточно просто обратиться к кнопка.name

const button = document.querySelector('button');

button.addEventListener('click', (evt) => {
  console.log(evt.target.name);
});

<button name="имя-кнопки-внутри-атрибута">Добавить в корзину</button>

Answer 2

Не совсем понял приведенный ответ (но всё равно большое спасибо за него), переделанный код не работал. Решил ситуацию следующим образом: по нажатию на объект класса "buttonAddToCart" (не одна и не все кнопки имеют этот класс) срабатывает функция (JQuery) считывания имени объекта данного класса. Код, которым проверял работоспособность:

$('.buttonAddToCart').click(function(){
  alert($(this).attr("name"));
});

Можно так же создать переменную со значением "$(this).attr("name")" и проводить операции над ней, по типу:

$('.buttonAddToCart').click(function(){
  let name = $(this).attr("name");
  alert(name);
});

БЛОГ НА HUSL

Как узнать значение атрибута "name" кнопки в коде html?

Ответы (2 шт):