Stap 2, de lampen

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>.

xxEr 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