title: JavaScript if statement to change Div
body: <p>I am hoping to get help with my IF statement in javascript. What is happening is that its not changing colour when the button is clicked. </p>
  
  <p>This is what i am trying to do. When the next button is clicked, the following should happen</p>
  
  <p>If the background colour of the light div is #ff0000 (red), it should change to #ffff00 (amber)</p>
  
  <p>If the background colour of the light div is #ffff00 (amber), it should change to #00ff00 (green)</p>
  
  <p>If the background colour of the light div is #00ff00 (green), it should change to #ff0000 (red)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;h1&gt;Traffic Light&lt;/h1&gt;
      &lt;div class="light"&gt;
      &lt;/div&gt;
      &lt;/br&gt;
      &lt;button id="next" onClick="setBgColour" type="button"&gt;Next&lt;/button&gt;     
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.light 
  {
      background-color: #ff0000;
      width: 100px;
      height: 20px;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>JavaScipt:</p>
  
  <pre><code>function setBgColour(){
  
      if(document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000')
      {
          document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
      }
  
      else if (document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00')
      {
          document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
      }
  
      else
  
      document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';
  
  }
  
  window.onload = function(){
  
      document.getElementById('next').addEventListener('click', setBgColour);
  
  };
  </code></pre>