CODEWITHSUNDEEP
javascripthtmlcss
Lightswrath101
Lightswrath101

Reputation: 13

Traffic Light Coursework - A452

Part 3 I've been confused grasping the basic concepts of html and js inorder to make a traffic light with a array and a button. So far I successfully made the css and all assets appear so the shapes and colours. I was wondering what would help fix this code as im not sure whats the problem. Other sites i researched gave me something completely different like public and stuff. No idea. I use notepad and will have to put this in my coursework.

HTML:

<!DOCTYPE HTML>
<html>
<head>
<title> Traffic Light Script </title> <!-- Name for the above tab -->
<link href="TrafficCascade.css" rel="stylesheet">
</head>
<body>  
<h1> Traffic Light </h1><!-- -->
<table> <!-- -->
<tr>
<td>
<button onClick="functionary()">Switch</button>
<div id="redL"></div>
<div id="yellowL"></div>
<div id="greenL"></div>
</td>
</tr>
</table>
<script src="Trafficvarscript.js"></script>
</body>
</html>

Css:

#redL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #7A0000;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
#yellowL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #7A5C00;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
#greenL{
height: 50px;
width: 50px;
margin: 1px auto;
background-color: #008000;
border-radius: 50px;
border: solid 1px black;
padding: 1px;
}
table{         /* Doesn't need dashes */
height: 180px;
width: 80px;
background-color: #000000;
border: 1px #000000;
text-align: center; 
margin-left: 50%; /* makes margin right 50% */
padding: 1px;
}
h1{
text-align: center;
padding: 1px;
}

Javascript:

var time = 0;
function functionary(){
time++;
}
{var red = document.getElementById('redL')
var yellow = document.getElementById('yellowL')
var green = document.getElementById('greenL')
var Colours = ["#FF0000","#FFB300","#05FF0D","#7A0000","#7A5C00","#008000"];
}
if(time == 1){
red.style.background = Colours[1];
yellow.style.background = Colours[4];
green.style.background = Colours[6];
}
else if(time == 2){
red.style.background = Colours[4];
yellow.style.background = Colours[2];
green.style.background = Colours[6];    
}
else if(time == 3){
red.style.background = Colours[4];
yellow.style.background = Colours[5];
green.style.background = Colours[3];
}
else if(time == 4){
var time = 0;
};

Part 4

So for my coursework I have to make a traffic light that runs without any input so automatically, which brought me to the onload function in javascript which runs scripts when a page is loaded. I was wondering how to correctly implement this in my current code. I would also like the traffic light to cycle through colours with a time delay, which can be done through set interval. I was struggling to correctly add both of these functions to let it work. I reused the css and only changed the js and html.

Upvotes: 1

Views: 3395

Answers (3)

Anonymous User
Anonymous User

Reputation: 65

This code will work 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
  font-family: sans-serif;
}

#controlPanel {
  float: left;
  padding-top: 30px;
}

.button {
  background-color: gray;
  color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 90px 40px;
  cursor: pointer;
}

#traffic-light {
  width: 150px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}

.bulb {
  height: 100px;
  width: 100px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

#controlPanel>h1 {
  margin-top: 15px;
  margin-bottom: 15px;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <div id="controlPanel">
  <h1 id="stopButton" class="button">Stop</h1>
  <h1 id="slowButton" class="button">Slow</h1>
  <h1 id="goButton" class="button">Go</h1>
  <h1 id="Lights" class="button">Clear</h1>
  <h1 id="autoLights" class="button">Auto</h1>
</div>

<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="slowLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>
    <script type="text/javascript">
        document.getElementById('stopButton').onclick = stopRed;
document.getElementById('slowButton').onclick = slowYellow;
document.getElementById('goButton').onclick = goGreen;
document.getElementById('Lights').onclick = Lights;
document.getElementById('autoLights').onclick = autoLights;

function stopRed() {
  Lights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function slowYellow() {
  Lights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function goGreen() {
  Lights();
  document.getElementById('goLight').style.backgroundColor = "green";
}


function Lights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}


function lightOne(num) {
  Lights();
  switch (num) {
    case 1:
      stopRed();
      break;
    case 2:
      slowYellow();
      break;
    case 3:
      goGreen();
      break;
    default:
      alert("you made some error");
  }
}

counter = 0;
maxSec = 3;

function timer() {
  setTimeout(function() {

    counter++;
    lightOne(counter);
    if (counter == maxSec) {
      return;
    }
    timer();
  }, 2000);
}

function autoLights() {
  counter = 1;
  lightOne(counter);
  timer();
}
    </script>
</body>
</html>

Upvotes: 0

James P. Whiting
James P. Whiting

Reputation: 11

I have been doing the same controlled assessment and here is my code which works perfectly fine:

<!DOCTYPE html>
<html>
<body>

<title>Javascript Task 3</title>

<h1>JavaScript Task 3</h1>

<button onclick="changeImage()">Change Lights</button>

<img id="Image" src="tlr.jpg"  width="150px" height="300px">

<script>
function changeImage() {
    var image = document.getElementById('Image');
    if (image.src.match("tla.jpg")) {
        image.src = "tlr.jpg";

    } else if (image.src.match("tlr.jpg")) {
        image.src = "tlra.jpg";

    } else if (image.src.match("tlra.jpg")) {
        image.src = "tlg.jpg";

    } else if (image.src.match("tlg.jpg")) {
        image.src = "tla.jpg";
    }
}
</script>

</body>
</html>

To make the code work properly, here are the images used:

However, you will need to save the images in the same folder as the code itself - the images will need to be named accordingly to what they are called in the code:

  • tlr.jpg = Red traffic light
  • tlra.jpg = Red and amber traffic light
  • tlg.jpg = Green traffic light
  • tla.jpg = Amber traffic light

Hope I was of some help

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17467

Everything appears in order, but your JavaScript conditions that change the colors are only being called once on page load. You need to perform the checks every time the button is pressed, so add them to your functionary method, like so:

var time = 0;
function functionary(){
  time++;

  if(time == 4){
    time = 1;
  }

  updateLights();
}

var red = document.getElementById('redL')
var yellow = document.getElementById('yellowL')
var green = document.getElementById('greenL')
var Colours = ["#FF0000","#FFB300","#05FF0D","#7A0000","#7A5C00","#008000"];

function updateLights() {
  if(time == 1){
    red.style.background = Colours[0];
    yellow.style.background = Colours[3];
    green.style.background = Colours[5];
  }
  else if(time == 2){
    red.style.background = Colours[3];
    yellow.style.background = Colours[1];
    green.style.background = Colours[5];    
  }
  else if(time == 3){
    red.style.background = Colours[3];
    yellow.style.background = Colours[4];
    green.style.background = Colours[2];
  }
}

Note I fixed a few other issues in this new updateLights method.

Upvotes: 0

Related Questions