Aziz Light

by Ori Drori

HTML

<button onclick="nextLight()">Click here</button>
<img id="demo" src="http://www.drivingtesttips.biz/images/traffic-lights-green.jpg">

JavaScript

var demo = document.getElementById("demo"); // get the demo element and cache it
var lights = [ // array of lights
"http://www.drivingtesttips.biz/images/traffic-lights-green.jpg", "http://www.drivingtesttips.biz/images/traffic-lights-amber.jpg",
    "http://www.drivingtesttips.biz/images/traffic-light-red.jpg"];
var currentLight = 0; // current light index holder 

lights.forEach(function(src) { // image preloader
   new Image().src = src;   
});

function nextLight() {
    currentLight++; // add one to currentLight index
    currentLight > 2 && (currentLight = 0); // if it's above 2 change it back to 0
    demo.src = lights[currentLight]; // assign the url to the src
}