Color Light Switch

Actually changes background color

by davestein

HTML

<html>
    <body>
        <input type="button" id="light-switch" value="Light Switch" /><br />
        
        The Lights are <span id="onoff">on</span>
        
    </body>
</html>

CSS

body { background-color: #FFFFFF; color: #000000; }
input { padding: 5px; }

JavaScript

var indiciator   = document.getElementById('onoff'),        // gets reference to onoff text
    light_switch = document.getElementById('light-switch'); // gets reference to button

// set a LISTENER for a 'click' EVENT
light_switch.onclick = function() {
    
    // innerHTML is the content inside any given element
    if( indiciator.innerHTML === 'on' ) {
      indiciator.innerHTML = 'off';  
      document.body.style.backgroundColor = '#000000'; 
      document.body.style.color = '#FFFFFF';   
    }
    else {
      indiciator.innerHTML = 'on';
      document.body.style.backgroundColor = '#FFFFFF'; 
      document.body.style.color = '#000000';  
    }
      
}; // onclick