How to pass a parameter into addEventListener("click", myFunction)?

Question

When adding the eventlistener ("click", myFunction) how can I pass in a parameter to myFunction without invoking it? Like... ("click", myFunction(arrayOne)). The button is triggering a function that uses arrays. I want the function to use a specific array based on a specific button.

   var btnOne = document.getElementById("btnOne);
   btnOne.addEventListener("click", myFunction);

See [`.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) — skara9, Jan 23 '22 at 18:31

score 1 · Answer 1 · answered Jan 23 '22 at 18:32

1

You can use arrow function to do it. It'll help you by not creating a new lexical scope, so no need to worry about mishandling this.

var btnOne = document.getElementById("btnOne");
btnOne.addEventListener("click", () => { myFunction(arg1, arg2...) });

answered Jan 23 '22 at 18:32

Kanishk Anand

1,686
1
7
16

What do you mean by mishandling `this`? – skara9 Jan 23 '22 at 18:36

score 0 · Answer 2 · answered Jan 23 '22 at 18:31

0

try this:

var btnOne = document.getElementById("btnOne);
btnOne.addEventListener("click", () => myFunction(params));

answered Jan 23 '22 at 18:31

Jafar Jabr

642
5
11

How to pass a parameter into addEventListener("click", myFunction)?

2 Answers2