Make eventlisteners unique?

Question

So I have a problem where the eventlisteners I setup all happen to work with the same variable. This is how it looks like:

// Prepare tooltips
for (var i = 0; i < document.getElementsByClassName("tooltip").length; i++) {

    var tooltip = document.getElementsByClassName("tooltip")[i];
    var input = document.getElementsByName(tooltip.id.substr(8))[0];

    var offsetTop = 0;
    var tmp = input;

    while (tmp != null) {
        offsetTop += tmp.offsetTop;
        tmp = tmp.offsetParent;
    }

    offsetTop -= 130;

    var offsetLeft = (input.offsetParent.offsetLeft + input.scrollWidth) + 50;

    tooltip.innerHTML += "<div class='corner'></div>";
    tooltip.style.top = offsetTop + "px";
    tooltip.style.left = offsetLeft + "px";

    input.addEventListener("focus", function() { document.getElementById(tooltip.id).style.display = "block"; });
    input.addEventListener("blur", function() { document.getElementById(tooltip.id).style.display = "none"; });
}

In the last two lines I set the eventlisteners. So whenever I focus an input field, no matter which one tooltip.id is always the same. I checked the input.id before its different in every loop.

possible duplicate of [adding 'click' event listeners in loop](http://stackoverflow.com/questions/8909652/adding-click-event-listeners-in-loop) — Rob W, May 06 '12 at 10:57

score 0 · Accepted Answer · answered May 06 '12 at 11:36

Javascript is a funny language :)
In each loop you're declaring a function which uses a reference to the variable tooltip. Since you use the variable many times: its value changes but the reference remains the same. When the function executes, it uses the reference (which has the last value).

Here is the solution: (I recommend calling the method 'document.getElementsByClassName("tooltip")' only once since it causes DOM traverse.

==== CODE STARTS HERE

var toolips = document.getElementsByClassName("tooltip"); for (var i = 0; i < toolips.length; i++) { var tooltip = toolips[i]; var input = document.getElementsByName(tooltip.id.substr(8))[0];

var offsetTop = 0;
var tmp = input;

while (tmp != null)
{
    offsetTop += tmp.offsetTop;
    tmp = tmp.offsetParent;
}

offsetTop -= 130;

var offsetLeft = (input.offsetParent.offsetLeft + input.scrollWidth) + 50;

tooltip.innerHTML += "<div class='corner'></div>";
tooltip.style.top = offsetTop + "px";
tooltip.style.left = offsetLeft + "px";


// assign tooltip id to the input
input.tooltipId = tooltip.id;

// add event listeners
input.addEventListener("focus", function() { document.getElementById(this.tooltipId ).style.display = "block"; });
input.addEventListener("blur", function() { document.getElementById(this.tooltipId).style.display = "none"; });

}

==== CODE ENDS HERE

I knew it was reference problem. Thank you very much. (: – May 06 '12 at 11:45 — , May 06 '12 at 11:45

Make eventlisteners unique?

1 Answers1