Cannot pass in variable into function in very simple event listener

Question

var trackMeLinks = document.querySelectorAll('.track-me-one');

if (trackMeLinks.length) {
  for (var link of trackMeLinks) {
		link.addEventListener('click', testMe('test'));
  }
}

function testMe(msg) {
	console.log(msg);
}

<a class='track-me-one' href='#'>click me</a>
<a class='track-me-one' href='#'>click me 2</a>

I'm trying to pass a very simple variable into an event listener inside a for loop. I actually can't figure out why it's not working despite it seeming very simple.

When clicking on any link, it should simply log 'test' to the console. Instead, the logs are run when the dom loads.

Why does this happen, and what is the fix for this?

I know that I could remove the brackets after testMe is called, but then I cannot pass in a variable. Thanks...

Try this link.addEventListener('click', () => testMe('test')); or link.addEventListener('click', function() { testMe('test');}); — Florim Maxhuni
– Florim Maxhuni, Commented Jan 22, 2020 at 11:24
testMe('test') immediately calls the testMe function when that line of code runs. You need to pass a function to addEventListener whereas you are currently passing undefined (the return value of testMe). If you want to "bake in" a value to that function, you can either use a lambda function () => testMe('test') or .bind(): testMe.bind(null, 'test') — JLRishe
– JLRishe, Commented Jan 22, 2020 at 11:24
Does this answer your question? addEventListener calls the function without me even asking it to — Jakub Hubert
– Jakub Hubert, Commented Jan 22, 2020 at 11:26

kooskoos · Accepted Answer · 2020-01-22 11:25:16Z

3

var trackMeLinks = document.querySelectorAll('.track-me-one');

if (trackMeLinks.length) {
  for (var link of trackMeLinks) {
		link.addEventListener('click', () => testMe('test'));
  }
}

function testMe(msg) {
	console.log(msg);
}

<a class='track-me-one' href='#'>click me</a>
<a class='track-me-one' href='#'>click me 2</a>

answered Jan 22, 2020 at 11:25

kooskoos

4,9391 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vladimir · Accepted Answer · 2020-01-22 11:26:52Z

1

You passed your function and call it at the same time, that is way You've got message into your console.

You may wrap calling your function with clouser function like this

var trackMeLinks = document.querySelectorAll('.track-me-one');

if (trackMeLinks.length) {
  for (var link of trackMeLinks) {
        link.addEventListener('click', function () {
          testMe('test');
        });
  }
}

function testMe(msg) {
    console.log(msg);
}

answered Jan 22, 2020 at 11:26

Vladimir

1612 bronze badges

Collectives™ on Stack Overflow

Cannot pass in variable into function in very simple event listener

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related