Change color of HTML Page via Javascript

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> 

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> 

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/

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.

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

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.