Change color of HTML Page via Javascript

Question

I have the following HTML + JavaScript Code for Changing background color of HTML Page from JS based on the color option chosen. However irrespective of any label I choose, my background is turning red only on mouseover and white on mouseout. Rest of the color changes are not happening. Where am I going wrong?

<html>
    <head>
        <title>
        Color Highlighter
    </title>

<script type="text/javascript">
    function changeColor(target)
    {
         document.body.style.background = target;
    }

    function restoreColor()
    {
         document.body.style.background ="white";
    }
</script>

</head>

<body>
    <label onmouseover="changeColor('red');" onmouseout="restoreColor();">Red<br>
    <label onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue<br>
    <label onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow<br>
    <label onmouseover="changeColor('green');" onmouseout="restoreColor();">Green<br>
</body>

You neglected to close your label elements properly …

C3roe
– C3roe

2015-02-19 18:28:36 +00:00
Commented Feb 19, 2015 at 18:28 — C3roe
– C3roe, Commented Feb 19, 2015 at 18:28

Shreejibawa · Accepted Answer · 2015-02-19 18:29:29Z

4

Your code is almost fine.

You forgot to complete </label> tag dude.

<label onmouseover="changeColor('red');" onmouseout="restoreColor();">Red</label><br>
<label onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue</label><br>
<label onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow</label><br>
<label onmouseover="changeColor('green');" onmouseout="restoreColor();">Green</label><br>

answered Feb 19, 2015 at 18:29

Shreejibawa

1,8681 gold badge28 silver badges38 bronze badges

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

Comments

TRGWII · Accepted Answer · 2015-02-19 18:29:00Z

2

You need to close each <label> tag with </label>:

<label onmouseover="changeColor('red');" onmouseout="restoreColor();">Red</label><br>
<label onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue</label><br>
<label onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow</label><br>
<label onmouseover="changeColor('green');" onmouseout="restoreColor();">Green</label><br>

answered Feb 19, 2015 at 18:29

TRGWII

6485 silver badges14 bronze badges

Comments

bgoldst · Accepted Answer · 2015-02-19 18:36:44Z

The problem is your HTML is invalid. You haven't closed your labels, so the first label contains all subsequent labels, and thus swallows the mouseover and mouseout events, preventing them from hitting the other labels.

Here's a demo of the problem, and how it can be solved:

HTML

<!-- fixed markup -->
<label class="valid" onmouseover="changeColor('red');" onmouseout="restoreColor();">Red</label>
<label class="valid" onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue</label>
<label class="valid" onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow</label>
<label class="valid" onmouseover="changeColor('green');" onmouseout="restoreColor();">Green</label>
<br/>
<br/>

<!-- original invalid markup -->
<label class="invalid" onmouseover="changeColor('red');" onmouseout="restoreColor();">Red<br>
<label class="invalid" onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue<br>
<label class="invalid" onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow<br>
<label class="invalid" onmouseover="changeColor('green');" onmouseout="restoreColor();">Green<br>

CSS

.valid {
    border:1px solid blue;
}

.invalid {
    border:1px solid red;
}

JavaScript

window.changeColor = function(target)
{
    document.body.style.background = target;
}

window.restoreColor = function()
{
    document.body.style.background ="white";
}

http://jsfiddle.net/5ufgg0uw/2/

demo

Using CSS, I've bordered the invalid labels with red and the valid labels with blue, so you can see the difference in behavior. It shows clearly how the first invalid label swallows up all following labels.

Tim · Accepted Answer · 2015-02-19 18:25:39Z

0

Why don't you just use changeColor('white') for onmouseout?

answered Feb 19, 2015 at 18:25

Tim

4,10910 gold badges39 silver badges64 bronze badges

2 Comments

Chuker Over a year ago

Since i have to change to white only onmouseout, how does it change anything to make function parameterized or not?

Tim Over a year ago

You know the changeColor function works - if you just use that method instead of creating a new one, it'll probably work. (I'm recommending you just use one function instead of two)

Samuel Goodell · Accepted Answer · 2015-02-19 18:28:55Z

0

I think there's a problem with your markup. Why do none of the label tags close? The behavior of JavaScript event propagation up through a target element's ancestor nodes would cause the behavior you describe.

answered Feb 19, 2015 at 18:28

Samuel Goodell

6403 silver badges10 bronze badges

Collectives™ on Stack Overflow

Change color of HTML Page via Javascript

5 Answers 5

Comments

Comments

HTML

CSS

JavaScript

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

HTML

CSS

JavaScript

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related