Event Listener Trouble

Question

I am trying to use an event listener for when I click on an object.

My HTML file

<div id="left">
</div>
<div id="right">
</div>

My JavaScript file

function changeImg(which)
{
  if(which === "left")
  {
     alert("left");
  }
  else
  {
     alert("right");
  }
}

var leftClick = document.getElementById("left");
leftClick.addEventListener("click", changeImg("left"), true);

var rightClick = document.getElementById("right");
rightClick.addEventListener("click", changeImg("right"), false);

Here is my JSFiddle, https://jsfiddle.net/pb4759jh68/zqzdhcnw/1/

My question is, why does my function run as soon as I run the page, rather than waiting until I click on either the left or right div?

Thanks!!!

Sandeep Tuniki · Accepted Answer · 2016-05-20T06:24:12.047

The problem is with these 2 lines:

leftClick.addEventListener("click", changeImg("left"), true);
rightClick.addEventListener("click", changeImg("right"), false);

The changeImg function is being called immediately, since you are using the parenthesis after the function name. You can do this to prevent it:

var leftClick = document.getElementById("left");
leftClick.addEventListener("click", function() {
    changeImg('left');
}, true);

var rightClick = document.getElementById("right");
rightClick.addEventListener("click", function() {
    changeImg('right');
}, false);

Here, we pass an anonymous function as a refernce, which will be called by the browser upon the click event. Inside the function, we are calling our own function changeImg.

score 0 · Answer 2 · answered May 20 '16 at 06:16

addEventListener requires a function as second argument. You're currently evaluating the handler function changeImg("left"), and assigning the result as the event handler. Try this instead:

var leftClick = document.getElementById("left");
leftClick.addEventListener("click", function() { return changeImg("left") }, true);

var rightClick = document.getElementById("right");
rightClick.addEventListener("click", function() { return changeImg("right") }, false);

Event Listener Trouble

2 Answers2