Trouble with refering to a variable in mouseover event

Question

I want to make an event where .gridss change colors with mouseover event. Problem is gridss comes out as not definied,and if i try to move the mouseover event into the the gridss function it also does not work. So how can I successfully refer to .gridds?

My question is pretty simple yet i cant seem to get it right,so thanks in advance.

const container = document.querySelector('#container');

$(document).ready(function() {
    for(var x = 0; x < 16; x++) {
        for(var y = 0; y < 16; y++) {
            let gridss = $("<div class='gridss'></div>");
            gridss.appendTo('#container');
        }
    }
});

gridss.addEventListener("mouseover", function( event ){
  event.target.style.color = "purple";

  setTimeout(function(){
    event.target.style.color = "";
  }, 10);
}, false);

What's the timeout for? Did you want the text to revert back to initial color? — zer00ne, Feb 28 '18 at 10:35

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Use jQuery for events if you are using jQuery. I assume that you are not aware of mouseout or mouseleave because it looks like you are using setTimeout() to trigger a delay of text color reverting back to original color. I used mouseenter and mouseleave which are similar to mouseover and mouseout events.

You had an error which that gridss wasn't defined. The reason why moving in and out of functions didn't work is because you defined gridss with let.

let is limited scope to that of the block
var scope is the function which works as long as you have gridss in the function.

Demo

const container = document.querySelector('#container');

$(document).ready(function() {
  for (let y = 0; y < 32; y++) {
    var gridss = $("<div class='gridss'>TEST</div>");
    gridss.appendTo('#container');
  }
  $('.gridss').on('mouseenter mouseleave', function(e) {
    if (e.type === 'mouseenter') {
      this.style.color = "purple";
    } else {
      this.style.color = "white";
    }
  });
});

#container {
  border: 5px solid blue
}

.gridss {
  border: 3px solid red;
  height: 20px;
  margin: 10px 5px;
  text-align: center;
  background: cyan;
  font-weight: 900;
  color: white;
  transition: color .5s ease
}

<div id='container'></div>

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 28 '18 at 10:33

zer00ne

41,936
6
41
68

ohh okay that makes sense, but now event (line 12) shows up as undefined, why is that? – Moe Tassi Feb 28 '18 at 10:41
Are you using Firefox? I'm using Chrome and saw no error. See Update it may answer your question – zer00ne Feb 28 '18 at 10:51
Why are you using 2 for`s? – Cata John Feb 28 '18 at 10:52
@CataJohn OP's code it's not efficient but it's not the problem. – zer00ne Feb 28 '18 at 10:53
@zer00ne ok, right. Anyway, your solution works for me. – Cata John Feb 28 '18 at 11:01
@CataJohn I removed one of the loops and doubled the 2nd parameter and added `let` to the first parameter [a good use of `let` is using it in loops to declare initial value of an increment](https://stackoverflow.com/a/35812376/2813224) – zer00ne Feb 28 '18 at 11:08
@zer00ne nice. Const can also be used here as 'y' is never reassigned a value. Const also creates a lexical scope for each iteration, same as let. – Cata John Feb 28 '18 at 11:54
@CataJohn I cannot touch `const` because when I see it I associate it with C and C++ then I get a headache. Same with `class` :/ – zer00ne Feb 28 '18 at 12:07

Trouble with refering to a variable in mouseover event

1 Answers1

Demo