Light Switch

Change text by hitting button

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: #FFF; color: #000; }
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';   
    }
    else {
      indiciator.innerHTML = 'on';
    }
      
}; // onclick