How to fix my traffic light code?

Question

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style type='text/css'>

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

    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Traffic Lights Controller</title>

<script type="text/javascript" >

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 >= sequenceData.length ) 
       index = 0;

      for( var i = 0, cv, dLen = lights.length; i < 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" ); };

    </script>
    </head>
        <body>
            <div id="wrapper">
                <h1>Traffic Lights Controller</h1>
                <div id="red-light"></div>
                <div id="yellow-light"></div>
                <div id="green-light"></div>
            </div>
        </body>
    </html>

My code is not working? I'm new to coding and am not sure why but the bit between the <style> tags are causing the problem or its not working with the rest of the code.

I could be wrong, but I believe this code hasn't been written by you. So, put some effort into understanding it and then come back with **specific** issue with *your* code. — Adam Azad, Apr 03 '16 at 13:21
Just so you know, ASAP/urgent is a good way to get downvotes here. I don't recommend you do it (and it will get edited out anyway). — halfer, Apr 03 '16 at 14:45
Possible duplicate of [How do I give text or an image a transparent background using CSS?](http://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — jeff.123, Mar 24 '17 at 18:45

score 0 · Accepted Answer · answered Apr 03 '16 at 13:28

Add class traffic-light to the wrapper like below

<div id="wrapper" class="traffic-light">
    <h1>Traffic Lights Controller</h1>
    <div id="red-light"></div>
    <div id="yellow-light"></div>
    <div id="green-light"></div>
</div>

DEMO

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 >= sequenceData.length ) 
       index = 0;

      for( var i = 0, cv, dLen = lights.length; i < 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" ); 
    };

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

<div id="wrapper" class="traffic-light">
    <h1>Traffic Lights Controller</h1>
    <div id="red-light"></div>
    <div id="yellow-light"></div>
    <div id="green-light"></div>
</div>

thank you so much! was struggling for weeks and was losing hope! — jeff.123, Apr 03 '16 at 13:50

How to fix my traffic light code?

1 Answers1