addEventListener("click",...) firing immediately [duplicate]

Question

I'm trying to create some appropriately-placed instructional tooltips that users click through to understand how the site interface works. Each tooltip has a "next" link that toggles the visibility of the previous and next tooltips by modifying the classes (and hence, css).

Here's some simplified code that is supposed to do this:

function displayTooltip(t){   //...some code to determine the tooltip IDs "next" and "previous"   document.getElementById(previous).className = "tooltip invisibleTooltip";   document.getElementById(next).className = "tooltip"; }  document.getElementById("tooltip-link1").addEventListener("click", displayTooltip(2)); 

displayTooltip is called immediately (and correctly toggles the class) when I paste this code into the console (or on page load). If I replace displayTooltip with an alert(), it fires when I click, as anticipated. What am I doing wrong?

Answer 1

When you are binding event you are calling the function document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

You need to pass reference to the function.

Change to below

document.getElementById("tooltip-link1").addEventListener("click", function(){    displayTooltip(2) });