Add event listeners with parameters to elements in a loop

Question

I'm trying to add event listeners to elements in a loop, but I'm struggling with getting the parameter to pass to the anonymous function correctly.

Here's an example of the html that I'm trying to apply the js to:

<button data-messagesend="Hello!">Send Hello</button>
<button data-messagesend="Goodbye!">Send Goodbye</button>

And here's the js:

// sendMsg function that will be applied to elements as an event listener
function sendMsg(msg) {
    console.log(msg);
}

//Get all elements that have the data-sendmessage property
elts=document.querySelectorAll('[data-messagesend]');

//Create global array for messages
var messages=[];

//Loop through elements and add an event listener to call sendMsg with it's massage
for(i=0;i<elts.length;i++) {

    //add element data-sendmessage value to messages array
    messages[i]=elts[i].dataset.messagesend;

    //add event listener
    elts[i].addEventListener('click',function(){sendMsg(messages[i]);}.bind(messages[i]),false);
}

it's the //add event listener line that I'm struggling with

I've also tried:

elts[i].addEventListener('click',function(){sendMsg(messages[i]);}.bind(messages,i),false);

and

elts[i].addEventListener('click',(function(msg){sendMsg(msg);})(messages[i]),false);

But it just returns undefined when the buttons are clicked.

Any help would be great :D

Fiddle

https://jsfiddle.net/to4nLz8L/

Use closure, `elts[i].addEventListener('click', function () { (function (i) { sendMsg(messages[i]); }(i)); }, false);` — Tushar, Oct 16 '15 at 17:54
Ah, very nice, Thank you :D ... I almost went along with the 'possible duplicate' answer, and changing the `sendMsg` function to use `this.dataset.sendmessage` (Which I didn't really want to do). I think your answer actually answers my question more than the duplicate, which is more of a work-around than a fix. Stick it as an answer, I'm sure it'll help others :D — Just Lucky Really, Oct 16 '15 at 18:15
I cannot add answer as this question is marked as duplicate. You should add the answer. — Tushar, Oct 16 '15 at 18:32
Ah, yeah it doesn't let me add one either ... Cheers @Barmar Lol — Just Lucky Really, Oct 16 '15 at 18:54
@Tushar I've reopened, since you think this needs a different answer than the ones in the duplicate. — Barmar, Oct 16 '15 at 18:57
Stretch, you can add answer now. Let me know when you add it. @Barmar Although, it may look like this is not dup, the base concept is same so it is dup. — Tushar, Oct 16 '15 at 19:01

score 1 · Answer 1 · edited May 23 '17 at 12:29

There are a couple of ways to achieve this. The first, answered by @Tushar in the comments (And jFiddle here), which uses the correct way to use enclosure:

// sendMsg function that will be applied to elements as an event listener
function sendMsg(msg) {
    console.log(msg);
}

//Get all elements that have the data-sendmessage property
elts = document.querySelectorAll('[data-messagesend]');

//Create global array for messages
var messages = [];

//Loop through elements and add an event listener to call sendMsg with it's massage
for (i = 0; i < elts.length; i++) {
    (function (i) {
        //add element data-sendmessage value to messages array
        messages[i] = elts[i].dataset.messagesend;
        console.log(messages);
        //add event listener
        elts[i].addEventListener('click', function () {
            sendMsg(messages[i]);
        }, false);
    }(i));
}

And then the second way, referenced by @Barmar for the answer here, which changes the sendMsg function to get the dataset info:

// sendMsg function that will be applied to elements as an event listener
function sendMsg(msg) {
    msg=this.dataset.messagesend||msg;
    console.log(msg);
}

//Get all elements that have the data-sendmessage property
elts=document.querySelectorAll('[data-messagesend]');

//Loop through elements and add an event listener to call sendMsg
for(i=0;i<elts.length;i++) {
    elts[i].addEventListener('click',sendMsg,false);
}

The reason I have preference of the first solution, is that the sendMsg function needs to be changed in the second solution. This would not be possible in all situations, such as using a function from an external js script.

Add event listeners with parameters to elements in a loop

1 Answers1