jQuery .CSS not updating background

Question

I am trying to change a grid of small square divs to a random background color. As far as I can tell my syntax is correct and the console is not throwing any errors but it's like the .css() will not accept my genColor method.

I found this which is very similar but the solution offered has not seemed to work.

function genColor() {
'use strict';
var hexes = '0123456789ABCDEF'.split('');
var color = '#';

for (var i = 0; i < 6; i++){
    color += hexes[Math.floor(Math.random * 16)];
}//end for loop

return color;

which is used in this

function highlightSquare() {
'use strict';

$('.square').on('mouseenter', function () {
    $(this).css('background', genColor()); 
});

Please help I can't figure out why this isn't working when examples show me it should.

P.S. The 'use strict'; keeps the Brackets editor JSLint from yelling at me. As near as I can tell it does not affect the code above.

Is the event firing? Add alert(color); right before the return to ensure it's running and generating a valid color. From what it looks like, your event listener is within the highlightSquare function - where it should probably not be within a function (aside from $(document).load(function(){ });). — user1189882
– user1189882, Commented Apr 5, 2016 at 22:57
"#undefinedundefinedundefinedundefinedundefinedundefined" - looks like i found OPs problem — IdeaMan
– IdeaMan, Commented Apr 5, 2016 at 23:02

user1189882 · Accepted Answer · 2016-04-05 23:02:26Z

4

Looks like the issue is with Math.random, which is a function, so it should be Math.random(). Also, not sure from your code, but the event listener should be assigned outside of a function.

function genColor() {
  'use strict';
  var hexes = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++){
    color += hexes[Math.floor(Math.random() * 16)];
  }//end for loop
  return color;
}

$('.square').on('mouseenter', function () {
  $(this).css('background', genColor()); 
});

Here's a working demo: https://jsfiddle.net/fb15L86u/

answered Apr 5, 2016 at 23:02

user1189882

Sign up to request clarification or add additional context in comments.

3 Comments

omarjmh Over a year ago

son of a... I was like what's going on here...nice catch

alistair_Welles Over a year ago

Wow... I feel incredibly dumb for missing that. Thank you. But can you explain why the event listener should be outside the function? I was intending it to be resusable inclusive of the mouseenter?

user1189882 Over a year ago

@JScharfenberger - Technically you could put it inside a function, and ensure the function is called in your code prior to needing the event attached; but it's easier to tell when it is being listened to if it's just setup from the get-go. If you have a control on the page that determines whether the squares will be colored on hover (turning on coloring squares), you could just evaluate whether that control is enabled in your event listener - that way there's no binding or un-binding the event if you need it turned off.

Collectives™ on Stack Overflow

jQuery .CSS not updating background

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related