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.

Answer 1

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