title: HTML & JavaScript Traffic Light
body: <p>so I have to write a piece of code for a working traffic light, where the light changes upon button click and then another button that will launch automatic sequence that will change the lights itself after x time. Now as this is a research task for a CS, I was looking for simple codes to develop from, and found the following link from which I have created the following code;</p>
  
  <p><a href="https://jsfiddle.net/87pjbdyb/1/" rel="nofollow noreferrer">https://jsfiddle.net/87pjbdyb/1/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Traffic Light&lt;/title&gt;
  &lt;script&gt;
  var lightStates = {red:0,amber:1,green:2};
  var currentState = lightStates.red;
  
  document.getElementById('changeBtn').onclick=function(){
      changeState();
  };
  
  
  function changeState()
  {
      clear();
    switch(currentState)
    {
      case lightStates.red:
      {
        document.getElementById("red").className ="light red";
        currentState =  lightStates.amber;
      }
      break;
      case lightStates.amber:
      {
        document.getElementById("amber").className ="light amber";
        currentState = lightStates.green;
      } break;
       case lightStates.green:
      {
        document.getElementById("green").className ="light green";
        currentState = lightStates.red;
      } break;
     }
  }
  
  function clear(){
     document.getElementById("red").className ="light off";
     document.getElementById("amber").className ="light off";
     document.getElementById("green").className ="light off";
  }
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      .traffic-light
  {
    width:50px;
    height:75px;
    background-color:gray;
  }
  
  .light
  {
    width:20px;
    height:20px;
    border:1px solid;
    margin-left:auto;
    margin-right:auto;
    border-radius: 50px;
  }
  
  .red
  {
    background-color:red
  }
  .amber
  {
    background-color:yellow
  }
  .green
  {
    background-color:green;
  }
  
  .off
  {
    background-color:transparent;
   }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="traffic-light"&gt;
    &lt;div class="light off" id="red"&gt;&lt;/div&gt;
    &lt;div class="light off" id="amber"&gt;&lt;/div&gt;
    &lt;div class="light off" id="green"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="changeBtn"&gt;Change&lt;/button&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Now on the website provided, the traffic light seems to work perfectly while on mine the traffic light is shown but I seem not to be able to get any colours to be shown. Could anyone please point me in direction of where I am going wrong as I have minimal experience in HTML, CSS and JavaScript. Thanks!</p>