JavaScript: How To Make An If Statement Do Two Things

Question

Below is an extract from a piece of code:

if (lightColour === fileArray[0]) {
   lightColour = "RedOrangeLight.jpg";
   lightTimer = "5000";
}

Assuming that lightColour does equal fileArray[0], what can I do to my code, so that lightColour equals "RedOrangeLight.jpg" and lightTimer is also assigned the value "5000"?

-- EDIT --

Okay, so clearly that wasn't very useful or helpful. I'll post my full code below:

<!DOCTYPE html>
<html>
<body>

<h1>Changing Traffic Lights w/ Arrays</h1>

<img id="trafficLight" src="RedLight.jpg">

<script>

var lightTimer = "1000"
var lightColour = trafficLight.src

var fileArray = ["RedLight.jpg",
                 "RedOrangeLight.jpg",
                 "GreenLight.jpg",
                 "OrangeLight.jpg"];

function lightChange() {

if (lightColour === fileArray[0]) {
   lightColour = "RedOrangeLight.jpg";
   lightTimer = 5000;
} else if (lightColour === fileArray[1]) {
   lightColour = "GreenLight.jpg";
   lightTimer = 1000;
} else if (lightColour === fileArray[2]) {
   lightColour = "OrangeLight.jpg";
   lightTimer = 5000;
} else {
  lightColour = "RedLight.jpg";
  lightTimer = 1000;
}

var light = document.getElementById('trafficLight');
light.src = lightColour

}

setInterval(lightChange, lightTimer);

</script>

</body>
</html>

Any indication as to what I have done wrong?

what isn't working with your code? This seems right – Chaim Friedman Apr 30 '17 at 15:41 — Chaim Friedman, Apr 30 '17 at 15:41
Oh right... So I have done this part of my code correctly? – Reef L. Apr 30 '17 at 15:43 — Reef L., Apr 30 '17 at 15:43

score 0 · Accepted Answer · answered Apr 30 '17 at 16:08

You defined your setInterval timeout only once - outside of your function. That's why it does not updates with the new if/else values!

Solution: Use setTimeout inside your function in order to update your timeout values:

var light = document.getElementById('trafficLight'); // Place it here!!
var lightTimer = 1000;
var lightColour = trafficLight.src;
var fileArray = [
  "//placehold.it/50x50/f00", // red
  "//placehold.it/50x50/f40", // redorange
  "//placehold.it/50x50/3f0", // green
  "//placehold.it/50x50/f80"  // orange
];

function lightChange() {

  if (lightColour === fileArray[0]) {
    lightColour = "//placehold.it/50x50/f40"; // redorange
    lightTimer = 1000;
  } else if (lightColour === fileArray[1]) {
    lightColour = "//placehold.it/50x50/3f0"; // green
    lightTimer = 5000;
  } else if (lightColour === fileArray[2]) {
    lightColour = "//placehold.it/50x50/f80"; // orange
    lightTimer = 1000;
  } else {
    lightColour = "//placehold.it/50x50/f00"; // red
    lightTimer = 5000;
  }

  light.src = lightColour

  // use setTimeout here instead
  setTimeout(lightChange, lightTimer);

}

lightChange(); // Start!!

<h1>Changing Traffic Lights w/ Arrays</h1>

<img id="trafficLight" src="//placehold.it/50x50/f00">

score -1 · Answer 2 · answered Apr 30 '17 at 15:47

-1

If you want the value of 5000, remove the quotation marks around it. If you set a variable to "5000", the variable will be a string and not a number. Removing the quotes will make it a number.

The code should look like this

lightTimer = 5000;

as apposed to

lightTimer = "5000";

answered Apr 30 '17 at 15:47

Diriector_Doc

582
1
12
28

1

Can you explain what's exactly wrong with a `"5000"` as string? – Roko C. Buljan Apr 30 '17 at 15:49
If you want it a string, its perfectly fine, but if it's _just_ a number, the variable can be easier manipulated if its a value. And by the sounds of it, `"5000"` isn't working. – Diriector_Doc Apr 30 '17 at 15:52
Well, setInterval can recognize a timeout parameter `"4000"` as *ms* so it does not matters at all. – Roko C. Buljan Apr 30 '17 at 16:12

JavaScript: How To Make An If Statement Do Two Things

2 Answers2