Using Mouseenter / MouseLeave to Change Div in JavaScript

Question

I am trying to use an array index to allow a set of div IDs to change from one ID to another when the mouseenter and mouseleave functions are triggered.

I know there are other ways to do this - toggle, hover, or CSS hover. This is just learning for me, and I am very new.

The code below is commented, and the basic problem is related to why an array variable of "largeID" (or smallID) outputs the proper values, but trying to use an index value doesn't. For each for statement, I want the smallID[i] value to be replaced with the largeID[i] value when the mouse enters the div, but I don't want to write the code for each one, i.e. "largeID[1], largeID[2].

Thanks for any pointers!!

$(document).ready(function() {

    var smallID = [];
    var largeID = [];

    var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
    var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div

    for(var i = 0; i < radialDivList.length; i++) {
        if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
        if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
        smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
        largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element

        alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
        alert(largeID[i]); // give rational and expected output

        $('#' + smallID[i]).mouseenter(function () { //works for all four radial menu divs when mouse enters
            //BUT largeID[i] is undefined
            alert(largeID[i]); // undefined
            alert(largeID); // gives expected output of full array
        }).mouseleave(function () { //mouseleave function not working

        });

    }

score 0 · Accepted Answer · edited May 23 '17 at 12:04

The reason your largeID[i] is undefined in your mouseenter function is because the last value of i is remembered and used on your mouseenter events.

When you use a variable and it goes "out of scope" a closure is automatically created to allow the variable to still exist for the function that still needs it, and your mouseenter functions all reference the same variable.

Your for loop stops when i is more than the amount of divs you have using radialDivList.length. Every attempt to use i to reference an index in your array will now be out of bounds.

The first answer on this page explains it well: JavaScript closure inside loops – simple practical example

I've modified your example to create a new function with it's own copy of "i". So when hovering over the first div i will equal 0, when hovering over the second div it will equal 1, etc.

$(document).ready(function() {

  var smallID = [];
  var largeID = [];

  var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
  var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div
  var funcs = [];

  for (var i = 0; i < radialDivList.length; i++) {
    if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
    if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
    smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
    largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element

    alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
    alert(largeID[i]); // give rational and expected output
    funcs[i] = function(i) {
      $('#' + smallID[i]).mouseenter(function() { //works for all four radial menu divs when mouse enters
        //BUT largeID[i] is undefined
        alert(largeID[i]); // undefined
        alert(largeID); // gives expected output of full array
      }).mouseleave(function() { //mouseleave function not working

      });
    }.bind(this, i);
  }

  for (var i = 0; i < funcs.length; i++) {
    funcs[i]();
  }
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Example</title>
</head>

<body>
  <div>
    <div>
      <div id="one" style="background:green;height:40px">
      </div>
      <div id="two" style="background:red;height:40px">
      </div>
      <div id="three" style="background:blue;height:40px">
      </div>
    </div>
  </div>
</body>

</html>

- Perfect. I knew the problem lay in that area, but didn't know how to write the actual code. **Your explanation on the value of [i] was especially helpful!** — boucains, Jan 04 '16 at 07:05

Using Mouseenter / MouseLeave to Change Div in JavaScript

1 Answers1

Linked