Как передавать параметры при onclick?

Question

Подскажите пожалуйста, как мне передавать параметры в функцию, кроме

<button id="btn1" onclick="myFunc('Hello')">Click1</button>
<button id="btn2" onclick="myFunc('By')">Click2</button>

?

Допустим:

let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');


btn1.onclick = myFunc;  //Как тут передать параметр, кроме того инлайн способа?
btn2.onclick = myFunc;

function myFunc(text){
   console.log(text)
}

Answer 1

Вызвать дополнительную функцию:

function handler(text) {
  console.log(text)
}

document.querySelector('[data-b1]').addEventListener('click', () => handler('Hello'))
document.querySelector('[data-b2]').addEventListener('click', () => handler('By'))

<button data-b1>Hello</button>
<br>
<button data-b2>By</button>

Установить параметры элементу, например установим атрибут:

[...document.querySelectorAll('button')].forEach((e) => e.addEventListener('click', (e) => {
  console.log(e.target.dataset.text)
}))

<button data-text='Hello'>Hello</button>
<br>
<button data-text='By'>By</button>

Answer 2

btn1.onclick = myFunc.bind(null, 'Hello');

Function.bind

Answer 3

Самый лаконичный вариант. Доступны и передаваемые данные и объект события. Как бы, и волки сыты и овцы целы.

button1.addEventListener('click',createOnClick('text1'));
button2.onclick = createOnClick('text2');

function createOnClick(text){
  return (event) => {
    console.log(text, event.target.id);
  }
}

<button id="button1">Button 1</button>
<button id="button2">Button 2</button>

БЛОГ НА HUSL

Как передавать параметры при onclick?

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

Вызвать дополнительную функцию:

Установить параметры элементу, например установим атрибут: