Question

I cannot for the life of me understand why I am getting the error:

“Type error: eCurVar is undefined”. Please review the code below.

    var aBBTemplates = document.getElementsByClassName ("cBBTemplates");
    var i = 2;
    while (i < aBBTemplates.length)
    {
        var eCurVar = aBBTemplates[i];
        if (eCurVar === e.target)
        {
            eCurVar.style.zIndex = 3;
     // type error: eCurVar is undefined on the following line. 
        }   else if (eCurVar.style.zIndex === 3)    {
            console.log (eCurVar);
            eCurVar.style.zIndex = 3-1;
        }   else
        {
            console.log (eCurVar)
            eCurVar.style.zIndex = i;
        }
        i--;
    }

Answer 1

After each iteration i is decremented of one unit… and after three iterations it becomes negative; so you read aBBTemplates[-1] you get undefined.

When you can’t understand what’s going on with few console.logs, your best bet is to add a debugger; instruction, and open your devtool (usually by pressing F12).

As for your problem you could fix it by adding a check on i:

while (i < aBBTemplates.length && i >= 0) {
}