<!DOCTYPE html>
<html>
<body>
<button onclick="nextLight()">Click here</button>
<img id="demo" src="trafficlightred.png">
<script>
function nextLight() {
var lights = ["trafficlightred.png", "trafficlightamber.png", "trafficlightgreen.png"]
if (document.getElementById("demo").src == lights[0]) {
document.getElementById("demo").src = lights[1];
} else if (document.getElementById("demo").src == lights[2]) {
document.getElementById("demo").src = lights[3];
}
}
</script>
</body>
</html>
<html>
<body>
<button onclick="nextLight()">Click here</button>
<img id="demo" src="trafficlightred.png">
<script>
function nextLight() {
var lights = ["trafficlightred.png", "trafficlightamber.png", "trafficlightgreen.png"]
if (document.getElementById("demo").src == lights[0]) {
document.getElementById("demo").src = lights[1];
} else if (document.getElementById("demo").src == lights[2]) {
document.getElementById("demo").src = lights[3];
}
}
</script>
</body>
</html>