When creating multiple onmouseover events, they keep "overwriting" the one previous until only the last event is recognized by the code

Question

So I'm trying to create a table where if the mouse is over a cell in the table, the background color will change. The table is pretty big (8 x 19), so I'm creating it dynamically. Here's my overall code

<html>
<meta charset="UTF-8">

<body>
  Test
  <table id="scheduling"></table>
</body>
<style>
  body {
    color: red;
  }
  
  table,
  th,
  tr {
    border: 2px solid black;
    width: 10vw;
  }
</style>
<!--<link rel="stylesheet" type="text/css" href="scheduler.css">-->
<script>
  function createSchedulingTable() {
    var scheduling = document.getElementById("scheduling");
    var firstrow = document.createElement('tr');
    var categories = ['Times', 'S', 'M', 'T', 'W', 'R', 'F', 'Sa'];
    for (var a = 0; a < 8; a++) {
      var th = document.createElement('th');
      th.innerHTML = categories[a];
      firstrow.appendChild(th);
    }
    scheduling.appendChild(firstrow);
    for (var a = 0; a < 18; a++) {
      var therow = document.createElement('tr');
      therow.innerHTML = (a + 7) + ':00';
      if (a + 7 == 24) {
        therow.innerHTML = '0:00';
      }
      for (var b = 0; b < 7; b++) {
        var th = document.createElement('th');
        th.id = ' cell' + a + ',' + b;
        th.onmouseenter = function() {
          highlight(th);
        };
        th.onmouseout = function() {
          dehighlight(th);
        };
        th.innerHTML = 'cell';
        therow.appendChild(th);
      }
      scheduling.appendChild(therow);
    }
  }
  createSchedulingTable();

  function highlight(element) {
    //alert('highlighting ' + this.id);
    element.style.background = 'yellow';
  }

  function dehighlight(element) {
    //alert('highlighting ' + this.id);
    element.style.background = 'white';
  }
</script>

</html>

Everything looks good to me. But when I test it out, only the very last table cell (bottom right corner) will change its background color. Any cell I put my mouse in, only that very last cell will glow yellow. It's almost as if the code is removing the previous onmouseenter for the previous element and replacing it with a new one. Why is this happening?

I could be wrong, but I think you need to create your function outside the scope of the for loop? Try `th.onmouseenter = highlight(th);` — Brandon Miller, Oct 09 '19 at 18:22
Possible duplicate of [What's the difference between using "let" and "var"?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var) — Herohtar, Oct 09 '19 at 18:27
Also related https://stackoverflow.com/questions/111102/how-do-javascript-closures-work — Herohtar, Oct 09 '19 at 18:27

score 1 · Answer 1 · answered Oct 09 '19 at 18:24

1

onmouseover is a method which will be overwritten when you define it again.

You can use addEventlistener to bind an event.

element.addEventlistener('mouseover', function(){
  //...
});

answered Oct 09 '19 at 18:24

tom

9,550
6
30
49

While that is true, this is not the problem here. – Herohtar Oct 09 '19 at 18:25
I am confused... The OP title does not fit to the question. Was the OP updated? – tom Oct 09 '19 at 18:27
No, the title just doesn't match because the OP was confused about what the actual problem was. – Herohtar Oct 09 '19 at 18:28

When creating multiple onmouseover events, they keep "overwriting" the one previous until only the last event is recognized by the code

1 Answers1