Stap 2, de lampen

Rode licht

Om de lamp te laten branden, plaatsen we code in het <script> </script> gedeelte.

function switchLight(color) {
    if (color === 'red') {
      document.getElementById("red").style.backgroundColor="red";
      document.getElementById("orange").style.backgroundColor="darkgray ";
      document.getElementById("green").style.backgroundColor="darkgray ";
      document.getElementById("text").innerHTML="STOP";
    }
}

Plaats deze code tussen <script> en </scipts>.

Er gebeurt nu nog niets, maar we hebben nu een functie switchLight gemaakt.

Deze functie zet het rode licht aan.

We veranderen nu de regel waar het rode licht staat zodat als we op het rode licht klikken de functie wordt aangeroepen.

De HTML-code voor het rode licht wordt nu:

<div id='red' class="lamp" onclick="switchLight('red')"></div>

We het licht nu veranderd zodat wanneer je op het licht klikt (onclick), de nieuwe functie die we hebben gemaakt wordt aangeroepen.

Testen

Controleer of als je o het rode licht klikt, het rode licht inderdaad 'aan'  gaat.

Ga verder als het werkt.

Oranje licht.

Voor het oranje licht breiden we de code in het script gedeelte uit met:

if (color === 'orange') {
      document.getElementById("red").style.backgroundColor="darkgray ";
      document.getElementById("orange").style.backgroundColor="orange";
      document.getElementById("green").style.backgroundColor="darkgray ";
      document.getElementById("text").innerHTML="-";
}

Let op dat deze if onder de bestaande if en in de functie moet staan.