Как передать значения атрибута по нажатию?

Question

[Роман Филиппов]

Есть форма, в нее должны передаваться значения по клику на ссылки.
У ссылок есть data-id = номер товара, этот номер нужно передать в форму.

<a id="one-click-b" class="one-click-button fancybox-inline" onclick="messr();" href="#one-click-buy" data-id="'. esc_html( $id ) .'">Купить сейчас</a>

<input type="text" name="dynamictext-875" value="" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamictext" id="one_b_id" aria-invalid="false">

function messr(){
var eler = document.getElementById('one-click-b').getAttribute("data-id");
document.getElementById("one_b_id").innerHTML = eler;
}

Вопрос в том, как каждый раз по клику получать нужные значения(из нажатых объектов) в форме?

На данный момент только значение первого элемента получается передать,
пробовал getElementsByClassName - вообще ничего не происходит и я так понимаю, что
этим мы получаем все объекты разом.

Answer 1

[0xD34F]

На какие кнопки надо нажимать, в каком data-атрибуте лежит id и куда его надо записывать:

const buttonSelector = '.one-click-button';
const dataAttr = 'id';
const input = document.querySelector('#one_b_id');

Как достать из кнопки значение атрибута:

const getId = el => el.dataset[dataAttr];
// или
const getId = el => el.getAttribute(`data-${dataAttr}`);
// или
const getId = el => el.attributes['data-' + dataAttr].value;

Делегирование, обработчик добавляется один раз, клик ловим на документе, надо проверять, что клик случился на кнопке, а не где-то ещё:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    input.value = getId(button);
  }
});

Или, назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = getId(e.currentTarget));

Comments

[Роман Филиппов]

Благодарю!

Это просто магия какая-то =)
Буду дальше курить JS и погружаться в его существо.