title: How to fix my traffic light code?
body: <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;style type='text/css'&gt;
  
                  .traffic-light {
                    width: 100%;
                  }
  
                  .off {
                    background-color: transparent!important;
                  }
  
                  .traffic-light {
                    margin: 0 auto;
                    width: 10%;
                    min-width: 180px;
                    border: 5px solid black;
                  }
  
                  .traffic-light div {
                    margin: 0 auto;
                    width: 150px;
                    height: 150px;
                    border: 5px solid black;
                    border-radius: 50%;
                    margin-top: 5px;
                    margin-bottom: 5px;
                  }
  
                  .red {
                    background-color: red;
                  }
  
                  .yellow {
                    background-color: yellow;
                  }
  
                  .green {
                    background-color: green;
                  }
  
      &lt;/style&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Traffic Lights Controller&lt;/title&gt;
  
  &lt;script type="text/javascript" &gt;
  
  function trafficLights()
  
      { 
       var sequenceData = [ [ 5, 1, 0, 0 ], [ 2, 1, 1, 0 ], [ 5, 0, 0, 1 ], [ 3, 0, 1, 0 ]  ],
           lights = [],
           index = 0;
  
       for( var i = 0, elemId; ( elemId = arguments[ i ] ); i++ )     
        lights[ i ] = document.getElementById( elemId );
  
       function display()
       {
        if( index &gt;= sequenceData.length ) 
         index = 0;
  
        for( var i = 0, cv, dLen = lights.length; i &lt; dLen; i++ )
         lights[ i ].style.backgroundColor = ( sequenceData[ index ][ i+1 ] ? lights[ i ].id.match(/^[a-z]+/i).toString() : '#000' );  
  
        setTimeout( display, sequenceData[ index++ ][ 0 ] * 1000 );
       } 
  
       display(); 
      }
  
  
      window.onload = function(){ trafficLights( "red-light", "yellow-light", "green-light" ); };
  
      &lt;/script&gt;
      &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="wrapper"&gt;
                  &lt;h1&gt;Traffic Lights Controller&lt;/h1&gt;
                  &lt;div id="red-light"&gt;&lt;/div&gt;
                  &lt;div id="yellow-light"&gt;&lt;/div&gt;
                  &lt;div id="green-light"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>My code is not working? I'm new to coding and am not sure why but the bit between the <code>&lt;style&gt;</code> tags are causing the problem or its not working with the rest of the code.</p>