2

допустим HTML есть 3 кнопки:

<input type = button value = 'раз' buttonOrder='0'></input>
<input type = button value = 'два' buttonOrder='1'></input>
<input type = button value = 'три' buttonOrder='2'></input>

Есть массив obj

obj = ['lorem','ipsum','dolor'];

Есть функция func

function func(order)  {
alert(obj[order]);
}

Требуется автоматически повесить на кнопки обработчик событий т.е. func(), так чтобы ей передавался аттрибут buttonOrder и, в конечном итоге, при нажатии на первую кнопку выскакивало "lorem", на вторую - "ipsum", на третью - "dolor".

Я пробовал применить и .onclick свойство объекта и .addEventListener но как я ни пытался, вставить функцию вместе с аргументом не удалось.

Как мне автоматизировать присвоение функций с различными аргументами?

2
  • onclick='func(...)' так пробовали и не работает? 29 дек 2018 в 20:53
  • Это либо вручную прописывать в HTML, что мне не нужно, либо через .onclick аттрибут, но тогда не получается вписать в func() аргументы. 29 дек 2018 в 21:05

1 ответ 1

4

Если вы хотите присваивать атрибут buttonOrder динамически - дайте знать в комментарии.

ES15

let obj = ['lorem','ipsum','dolor'];

document.querySelectorAll("input[type='button']").forEach((item, index) => {
  item.addEventListener("click", (e) => {
    let elem = e.currentTarget;
    let buttonOrder = elem.getAttribute("buttonOrder");
    alert(`buttonOrder: ${buttonOrder}\nobj: ${obj[buttonOrder]}`);
  });
});
    
<input type="button" value='раз' buttonOrder="0"></input>
<input type="button" value='два' buttonOrder="1"></input>
<input type="button" value='три' buttonOrder="2"></input>

По-старому

var obj = ['lorem','ipsum','dolor'];

document.querySelectorAll("input[type='button']").forEach(function (item, index) {
  item.addEventListener("click", function(e) {
    var elem = e.currentTarget;
    var buttonOrder = elem.getAttribute("buttonOrder");
    alert("buttonOrder: " + buttonOrder + "\nobj: " + obj[buttonOrder]);
  });
});
<input type="button" value='раз' buttonOrder="0"></input>
<input type="button" value='два' buttonOrder="1"></input>
<input type="button" value='три' buttonOrder="2"></input>

6
  • Вы используете синтаксис такой как => и $. Это ведь не чистый джаваскрипт? Потому что я пишу на чистом. 29 дек 2018 в 21:08
  • 1
    Это чистый js, es15. Никакого jQuery 29 дек 2018 в 21:13
  • 1
    Про =>, про ${} 29 дек 2018 в 21:14
  • 1
    @IgorCheglakov отредактировал ответ по старой спецификации 29 дек 2018 в 21:26
  • 1
    @IgorCheglakov, объект event передается в качестве первого параметра в обработчик события
    – Grundy
    8 янв 2019 в 12:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.