在mouseenter上使用JavaScript不断在div上循环颜色

Question

I have a div on a page and I would like to continuously cycle through a set of colors using javascript .

I've seen a number of articles on Stack Overflow about continuous loops to show information using arrays and javascript yet I have had trouble trying to implement it into my own project.

My HTML:

<div id="box" style="background:grey;" onmouseenter="change()"></div>

and the closest JS solution I can find:

var change = function() {
    colors = ['#00b0e2', '#e3144e', '#15e39b'];
    count = -1;
    return function() {
        return colors[++count % colors.length];
    }
    document.getElementById('box').style.background = colors; // or should this be **colors[]**?
}

I understand what is happening up until the return function but then I am having trouble understanding how to inject the color into the html?

Any help or tips would be appreciated thanks.

Answer 1

I think you are really close, but are missing a couple of key things.

Firstly , when you say onmouseover="change()" that means that it will run change() every time the mouseover runs unlike using addEventListener(change()) which would run the function returned by change as the event handler.

Secondly to change the element, all you need to do is get a handle on the element and set the background.

The code below does what I think you were trying to do but more simply. I hope it helps.

 // setup our colors and state once colors = ['#00b0e2', '#e3144e', '#15e39b']; count = -1; var change = function(element) { element.style.background = colors[++count % colors.length]; } 

 <!-- Pass in the element when creating the change listener --> <div id="box" style="background:grey;" onmouseenter="change(this)"> Give our box some contents so we can see it. </div> 

Explanation:

the basic concept behind the loop is that we have a count that tells us colors[count] is currently active.

When a mouseover happens, three things happen in the one line.

• ++count : this adds 1 to count , but unlike count++ , it does so before the value is used. Meaning that the first time a mouseover occurs, the value of count is 0

• count % colors.length : This just lets us wrap around to the first color once it has hit the last color. The % ( modulus ) operator gives the remainder. a % b will return the remainder after dividing a / b . If count = 0 , count % 3 yields 0, but if count = 4 , count % 3 yields 1. You can read more about this and other Arithmetic operators on MDN

• element.style.background = colors[...] : This sets the background css attribute to the color we selected in the last step.

so to put it all together, here is the change function broken out into 3 lines.

var change = function(element){
    count++; //increment count before using it.
    var our_color = count % colors.length; // wrap properly
    element.style.background = colors[our_color];
}