CODEWITHSUNDEEP
javascript
robtaxe
robtaxe

Reputation: 7

what is wrong with this traffic light javascript code?

this code is to switch between pictures (traffic lights) and then make it go back to the start again. the first image is working fine however the others will not come up.

<head>
<img id="red" src="A452 Images/red light.png" width="255" height="300" />
<button onclick="fnnextimage()">change image</button> 
</head>

<body>
<script>
var imgarray=[];

imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";

function fnnextimage(){

    var lightchange = 1;

    lightchange = lightchange+1;

    if(lightchange=3){
        lightchange=1};

    document.getElementById('red').src=imgarray[fnnextimage]
}
</script>
</body>
</html>

Upvotes: 0

Views: 1101

Answers (3)

Erica
Erica

Reputation: 2457

Within the fnnextimage function, lightchange is first set to 1, then incremented (to 2). Its value ends up the same each time that function executes.

(Tip: When a function doesn't do what you expect, console.log(variableName) is a quick way to see what is in variableName at any given time. That's a faster way to debug than asking Questions on SO.)

When the code tries to compare if(lightchange=3), it actually sets the value instead of evaluating the value. Use == in conditionals.

imgarray[fnnextimage] is trying to access the index with variable fnnextimage which doesn't exist — that is a function name, not a variable name.

Upvotes: 0

Tobias
Tobias

Reputation: 7771

Your code contains three errors:

  1. lightchange should be a global variable, so you need to declare it above the function (as you do with imgarray):

    var imgarray=[];

imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";

var lightchange = 1;

function fnnextimage(){

  2. if(lightchange=3){ should be if(lightchange == 3) {. Use = for assignments and == for equality checks.

  3. You cannot use a function as an array index: imgarray[fnnextimage] should be imgarray[lightchange - 1] (array indices start with zero).

In conclusion, this should work:

var imgarray = [];

imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";

// Changed: lightchange is now global
var lightchange = 1;

function fnnextimage() {
    lightchange = lightchange + 1;

    // Changed: compare to 3 instead of assigning 3
    if(lightchange == 3){
        lightchange = 1;
    }

    // Changed: Use correct array index
    document.getElementById('red').src = imgarray[lightchange - 1];
}

Upvotes: 3

PDKnight
PDKnight

Reputation: 722

The problem is that var lightchange is not a global variable. To fix it, do following:

var imgarray=[],lightchange = 1;

imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";

function fnnextimage(){

    lightchange++;

    if(lightchange==3)
        lightchange=1;

    document.getElementById('red').src=imgarray[lightchange-1];
}

Upvotes: 0

Related Questions