Traffic light script won’t work

Report
Question

Please briefly explain why you feel this question should be reported .

Report
Cancel

Can anyone help with the following script:

 

<html>
<body>
<body>
<h1> JavaScript Task 3</h1>
<img id=”lights” src=”H:\Documents\assets\fireworks RED.png”>
<p> Traffic light script</p>
<script>
var list =[

“H:\Documents\assets\fireworks RED.png”,
“H:\Documents\assets\fireworks RED & AMBER.png”,
“H:\Documents\assets\fireworks GREEN.png”,
“H:\Documents\assets\fireworks AMBER.png”,
];

var index = 0

function changeLights() {
index = index +1;

If (index == list.length) index = 0

var image = document.getElementById(‘Lights’);
image.src=list[index];}
var timer = setInterval(ChangeLights,1000);
</script>
</body>
</html

It is meant display a traffic light in the browser and change colours. At the moment, it’s only showing the traffic light itself, but not showing colours or changing.

in progress 0
JavaScript 2 weeks 2 Answer 682 views 0

About CompTalk

Answers ( 2 )

  1. w3r

    Please briefly explain why you feel this answer should be reported .

    Report
    Cancel

    Please use
    [language]
    your code
    [/language]
    while posting any code in your question.
    language means html, php, python, java… etc.

  2. ritwik

    Please briefly explain why you feel this answer should be reported .

    Report
    Cancel

    Following code may be useful for you –

    <!DOCTYPE html>
    <html>
       <head>
          <title>Image change example</title>
          <script>
              function displayNextImage() {
                  x = (x === images.length - 1) ? 0 : x + 1;
                  document.getElementById("img").src = images[x];
              }
    
              function displayPreviousImage() {
                  x = (x <= 0) ? images.length - 1 : x - 1;
                  document.getElementById("img").src = images[x];
              }
    
              function startTimer() {
                  setInterval(displayNextImage, 3000);
              }
    
              var images = [], x = -1;
              images[0] = "red.png";
              images[1] = "blue.png";
              images[2] = "green.png";
          </script>
       </head>
    
       <body onload = "startTimer()">
           <img id="img" src="orange.png"/>
           <button type="button" onclick="displayPreviousImage()">Previous</button>
           <button type="button" onclick="displayNextImage()">Next</button>
       </body>
    </html>
    

Leave an answer

Browse

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>