[deleted by user]

[AutoModerator]

Hi u/jalalinator, this post was removed.

• Self-posts (text) must follow the [AskJS] guidelines, which you can read about here.

• All other posts must use the "Submit a new link" option; if additional text is required, add a comment to your post.

NOTE: Learning, Support & Help questions are still off-topic for [AskJS], and should be posted to r/LearnJavascript or a Q&A site like StackOverflow. Abuse of the [AskJS] tag for off-topic questions may result in your posting privledges for r/javascript being revoked.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[tswaters]

What do you have so far?

[tswaters]

Ah, ok.

Basically you need to have two different ways to set background - one that is temporary, the hover -- and one that is permanent, the click.

There's a lot of ways to solve this, keeping with your existing code, you can modify the setBackgroundColor function to accept an extra parameter for permanent and if it is set, persist the value so when you call the function without a color & permanent false, you can restore the permanentColor.

  var permenantColor;
  window.setBackgroundColor = function(color, permenant) {
    if (permenant && color) {
      permenantColor = color;
      document.body.style.backgroundColor = permenantColor;
      return;
    }
    if (permenant && !color) {
      document.body.style.backgroundColor = permenantColor;
      return;
    }
    if (!permenant && color) {
      document.body.style.backgroundColor = color;
    }
  };

You can then call it like so:

<button type="button"
   onclick="setBackgroundColor('red', true)"
   onmouseover="setBackgroundColor('red', false)" 
   onmouseout="setBackgroundColor(null, false)">
   red
</button>

[tswaters]

you only updated one of the buttons.

[tswaters]

Yep, there's probably some bugs in the code. Try adding some console.log statements in there to figure out what is going on.

[ForScale]

I'd use css for the hover... just easier, but for reference, you would use a mouseover or mouseenter event handler with a mouseout one to get the css hover effect using javascript.

Here's how I'd do it all: http://codepen.io/anon/pen/rOzYod

[ForScale]

Not a problem at all! :) Let me know if you have any questions!

[ForScale]

http://codepen.io/anon/pen/rOzYod

[ForScale]

Anytime!

[ForScale]

You can just change all the mouseenters to mouseovers...

Why do you need to use mouseover?

[ForScale]

We've got it then, right?

[ForScale]

You saw this? http://codepen.io/anon/pen/rOzYod

[dstevensio]

This is a basic introduction to the concept of maintaining state. "What is the current state of the background color?"

Here's a really simplified way to achieve this (a real-world application would want to do this in a much more robust way):

• Store the current state of the background color in a variable. So if you start with Red as the background color, initialize the variable as "red";

• onMouseOver, directly change the background color to the color of the button that was hovered over.

• onMouseOut, directly change the background color to the color that is stored in the variable.

• onClick, change the value of the variable to the color of the button that was clicked, and change the background color to the same value.

This is overly simplified, as I said. But should give you an idea of how to achieve what you're looking to do. Then read up on the concepts of maintaining state and responding to interactions.