Traffic Light illumination using an array

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Brigitte Behrmann
    New Member
    • Jun 2007
    • 25
    #1

    Traffic Light illumination using an array

    Hi There

    This is my first time on the site. I am studing information technology and one of my subjects is HTML & Javascript. I am battling and have an assignment due, please help!

    I need to use cycle & stop buttons to control the animation and javascript code to animate the images of a traffic light. I have drawn 3 pictures in Paint, each with a different colour illumated and saved as banner1.jpg, banner2.jpg & banner3.jpg respectively.
    The screen layout is fine but I cannot get the cycle and stop function to work, there is obviously something very wrong in my code and being a "newbie" have no idea where to find the problem.
    Any help will be appreciated.

    My code so far:
    <html>
    <head>
    <title>Questi on 3 Traffic Lights</title>

    <SCRIPT LANGUAGE="JAVAS CRIPT>
    <!-- Hide from old browsers

    var banners = new Array("banner1. jpg","banner2.j pg","banner3.jp g")
    var bnrCntr = 0
    var timer
    function bancycle() {
    bnrCntr = bnrCntr + 1
    if (bnrCntr == 3) {
    bnrCntr = 0
    }
    document.Banner .src = banners[bnrCntr]
    timer = setTimeout("ban cycle()",1000)
    }
    function stopcycle() {
    clearTimeout(ti mer)
    }

    //-->
    </script>
    </head>
    <body>
    <img src="banner1.jp g" name="banner" width=110 height=200>
    <form><input type="button" value="Cycle" name="Cycle" onclick="banCyc le()">
    <input type="button" value="Stop" name="Stop" onclick="stopCy cle()">
    </form>
    </body>
    Tags: traffic illumination
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Welcome to TSDN!

      Javascript is case-sensitive. "Banner" is not equal to "banner".

        Comment

        • Brigitte Behrmann
          New Member
          • Jun 2007
          • 25
          #3
          Thanks . I changed the case but it still will not cycle and stop.
          Attached updated code.... please assist.

          <html>
          <head>
          <title>Questi on 3 Traffic Lights</title>

          <SCRIPT LANGUAGE="JAVAS CRIPT>
          <!-- Hide from old browsers

          var banners = new Array("banner1. jpg","banner2.j pg","banner3.jp g")
          var bnrCntr = 0
          var timer
          function banCycle() {
          bnrCntr = bnrCntr + 1
          if (bnrCntr == 3) {
          bnrCntr = 0
          }
          document.banner .src = banners[bnrCntr]
          timer = setTimeout("ban Cycle()",3000)
          }
          function stopcycle() {
          clearTimeout(ti mer)
          }

          //-->
          </script>
          </head>
          <body>
          <img src="banner1.jp g" name="banner" width=110 height=200>
          <form><input type="button" value="Cycle" name="Cycle" onclick="banCyc le()">
          <input type="button" value="Stop" name="Stop" onclick="stopCy cle()">
          </form>
          </body>

            Comment

            • Logician
              New Member
              • Feb 2007
              • 210
              #4
              Originally posted by Brigitte Behrmann
              Hi There

              This is my first time on the site. I am studing information technology and one of my subjects is HTML & Javascript. I am battling and have an assignment due, please help!

              I need to use cycle & stop buttons to control the animation and javascript code to animate the images of a traffic light. I have drawn 3 pictures in Paint, each with a different colour illumated and saved as banner1.jpg, banner2.jpg & banner3.jpg respectively.
              The screen layout is fine but I cannot get the cycle and stop function to work, there is obviously something very wrong in my code and being a "newbie" have no idea where to find the problem.
              Any help will be appreciated.
              JavaScript Lesson #1
              ---------------------------------------------------
              Always check the JavaScript console.
              ---------------------------------------------------

              Your buttons are calling functions different to those you have written.
              <!-- --> comments in scripts ary no longer needed.
              Code:
              <html>
<head>
<script type='text/javascript'>
var banners = ["banner1.jpg","banner2.jpg","banner3.jpg"];
var bnrCntr = 0;
var timer;
function banCycle()
{
 if(++bnrCntr == 3)
  bnrCntr = 0;

 document.images.banner.src = banners[bnrCntr];
 
 timer = setTimeout("banCycle()",1000);
}
function stopCycle()
{
 clearTimeout(timer);
}

</script>
</head>
<body>
<img src="banner1.jpg" name="banner" width=110 height=200>

<form>
 <input type="button" value="Cycle" name="Cycle" onclick="banCycle()">
 <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
</body>
</html>

                Comment

                • Brigitte Behrmann
                  New Member
                  • Jun 2007
                  • 25
                  #5
                  Thanx Logician, it worked like a charm.
                  Your comment re <!--> is noted however, the lecturer wants us to enter in this format!

                  Watch this space as the next item I am battling with is my code for a digital clock. If you have a spare moment feel free to comment, all the help I can get is always appreciated!

                  This is what I have so far:
                  <html>
                  <head>
                  <title>Digita l Clock</title>
                  <script type="text/javascript">
                  <!-- HIDE FROM INCOMPATIBLE BROWSERS
                  function curTime() {
                  var now = new date();
                  var day = now.GetDay();
                  var date = now.GetDate();
                  var year = now.GetFullYear ();
                  var month = now.GetMonth();
                  var hours = now.GetHours() + 1;
                  var minutes = now.GetMinutes( );
                  var seconds = now.GetSeconds( );
                  var days = new Array();
                  days[0] = "Sunday";
                  days[1] = "Monday";
                  days[2] = "Tuesday";
                  days[3] = "Wednesday" ;
                  days[4] = "Thursday";
                  days[5] = "Friday";
                  days[6]="Saturday";
                  var display=days[day] + " " + month + "/" + date + "/"
                  + year + " "+ hours + ":" + minutes + ":" + seconds;
                  document.forms[0].readout.value= display;
                  }
                  var tick = setInterval("cu rTime()", 1000);
                  //STOP HIDING FROM INCOMPATIBLE BROWSERS -->
                  </script>
                  </head>
                  <body>
                  <form action="">
                  <p><input type="text" size="30" name="readout" /></p>
                  </form>
                  </body>
                  </html>

                    Comment

                    • Logician
                      New Member
                      • Feb 2007
                      • 210
                      #6
                      Originally posted by Brigitte Behrmann
                      Thanx Logician, it worked like a charm.
                      Your comment re <!--> is noted however, the lecturer wants us to enter in this format!
                      Then tell him he needs to get a more recent book. Any browser that needs those can't handle today's websites and they are potentially harmful in XHTML, where they really can hide a script.
                      Watch this space as the next item I am battling with is my code for a digital clock. If you have a spare moment feel free to comment, all the help I can get is always appreciated!

                      This is what I have so far:
                      <snip> There's nothing wrong there that can't be detected by following lesson #1 (Use FireFox).

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          Tell him he needs a proper doctype, too. See the article under "Articles" at the top under HTML/CSS.

                            Comment

                            • Brigitte Behrmann
                              New Member
                              • Jun 2007
                              • 25
                              #8
                              Originally posted by drhowarddrfine
                              Tell him he needs a proper doctype, too. See the article under "Articles" at the top under HTML/CSS.
                              Will do - in fact it's a she.

                              So what is this firefox all about. Do I download software and this helps check my code??

                              For the studies I am doing it is supposed to be simple stull that we save as htm files but never get published etc.

                              I just have to complete the assignment questions and send in for marking by the 23rd. If you can help me with this code in the meantime will appreciate.

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  Maybe you need a Javascript tutorial. Firefox is an alternative browser to Internet Explorer. It's a lot more helpful when debugging, not to mention more standards-compliant.

                                    Comment

                                    • shainarushton6
                                      New Member
                                      • Oct 2016
                                      • 2
                                      #10
                                      Hi,i was just wondering if you know what structure of an array is used to handle the traffic light sequence.Im asking as this is the same project I'm doing and I'm so stuck on this part.Thankyou.

                                        Comment

                                        Previous template Next
                                        Working...