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(...)' так пробовали и не работает? Commented 29 дек. 2018 в 20:53
  • Это либо вручную прописывать в HTML, что мне не нужно, либо через .onclick аттрибут, но тогда не получается вписать в func() аргументы. Commented 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
  • Вы используете синтаксис такой как => и $. Это ведь не чистый джаваскрипт? Потому что я пишу на чистом. Commented 29 дек. 2018 в 21:08
  • 1
    Это чистый js, es15. Никакого jQuery Commented 29 дек. 2018 в 21:13
  • 1
    Про =>, про ${} Commented 29 дек. 2018 в 21:14
  • 1
    @IgorCheglakov отредактировал ответ по старой спецификации Commented 29 дек. 2018 в 21:26
  • 1
    @IgorCheglakov, объект event передается в качестве первого параметра в обработчик события
    – Grundy
    Commented 8 янв. 2019 в 12:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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