Javascript image swap sequence

Question

As a task i am going to make traffic lights change in sequence when a button is pushed.I am going to do this by using a variable and adding one to it each time a image is shown therefore the computer knows what image to display next through the use of if and elses however i am not great at javascript and it will not run i have tried in many different environments for example in dreamweaver and notepad ++ but am getting no where here is what i have got :

<HTML>
<head>
    <title>Untitled Document</title>
</head>


<body>
   <img id="IMAGE" width="100" height="200"></img>
   <button onClick="imageswap(a)">GO</button>
</body>

<script>
    var a = 0
    function imageswap(a)
    {
       if (var a==0) {
       document.getElementById('IMAGE').src='red_empty_empty.png';
       var a + 1;
    } 
    else if (a==1)
    {
       document.getElementById('IMAGE').src='empty_amber_empty.png';
       var a + 1;
    } 
    else 
    {
       document.getElementById('IMAGE').src='empty_empty_red.png';
      var a==0;
    } 
 }
</script>
</html>

Thank you for reading and i would appreciate anyones help.

edit: I have taken on feedback and amended my code but when testing it does not show the image i would like instead the little x .

<HTML>
<head>
    <title>JAVASCRIPT</title>
</head>


<body>
   <img id="IMAGE" width="100" height="200"></img>
   <button onClick="imageswap()">GO</button>
</body>

<script>
    var a = 0
    function imageswap()
    {
       if (a=0) {
       document.getElementById('IMAGE').src='red_empty_empty.gif';
       a = a + 1;
    } 
    else if (a==1)
    {
       document.getElementById('IMAGE').src='empty_amber_empty.gif';
       a = a + 1;
    } 
    else 
    {
       document.getElementById('IMAGE').src='empty_empty_red.gif';
      var a=0;
    } 
 }
</script>
</html>

edit: I have taken into account some recommendations and now when i click the button the first image is shown followed by the second on a second button press however it fails to display the third image and the first and second image dont always work first time.

<HTML>
<head>
    <title>JAVASCRIPT</title>
</head>


<body>
   <img id="IMAGE" width="100" height="200"></img>
   <button onClick="imageswap()">GO</button>
</body>


<script>
var a = 0;

function imageswap() {
  if (a == 0) {
    document.getElementById('IMAGE').src = 'red_empty_empty.gif';
     a += 1;
  } else if (a == 1) {
    document.getElementById('IMAGE').src = 'empty_amber_empty.gif';
     a += 1;
  } else {
    document.getElementById('IMAGE').src = 'red_empty_empty.gif';
     a = 0;
  }
}
</script>

You have a few syntactical errors. Use [JSHint](http://jshint.com/) to find them. — Sebastian Simon, Nov 04 '16 at 16:46
On line 3 jshint has given me the error "Expected an identifier and instead saw 'var'." But i do not understand how to fix this please explain ? — benisbestpokemongo, Nov 04 '16 at 16:53

prasanth · Answer 1 · 2016-11-04T17:01:50.893

0

I Apply with in console.log(a).It will show the increment of a\

Apply the var a in globel It will increment on each time of you click

And increment Apply with a +=1 instead of a+1

var a = 0
console.log(a)
function imageswap(){
if (a==0) {
document.getElementById('IMAGE').src='red_empty_empty.png';
a += 1;
  console.log(a)
} else if (a==1){
document.getElementById('IMAGE').src='empty_amber_empty.png';
a += 1;
  console.log(a)
} else {
document.getElementById('IMAGE').src='empty_empty_red.png';
 a =0;
  console.log(a)
} 

}

<button onclick="imageswap()">GO</button><br>
<img id="IMAGE" width="100" height="200"></img>

edited Nov 04 '16 at 17:01

answered Nov 04 '16 at 16:54

prasanth

22,145
4
29
53

OK say i remove the a from inside the brackets how can i get the code then to work ? (taking into account i have added the missing semi colons ) – benisbestpokemongo Nov 04 '16 at 16:56
Which one of the brackets?can you explain? See i dont apply Any value inside the brackets `imageswap()` – prasanth Nov 04 '16 at 16:59
Yes thats what i mean to have nothing in the brackets when anything to do with the function image swap occurs – benisbestpokemongo Nov 04 '16 at 17:09
see with my answer.I was added globel variable declaration . – prasanth Nov 04 '16 at 17:11
If you need apply with in brackets `imageswap(a)` its also working.inside the function you no need to declare the variable. its declare with into function `(a)` – prasanth Nov 04 '16 at 17:13

score 0 · Answer 2 · answered Nov 04 '16 at 16:55

in you first line var a = 0 you declare your counter (the var a part) and initialise it by assigning the value 0 (the a = 0 part), therefore there's no need to declare the variable again later, you just want to update it by assigning new values

so the statement if (var a==0) would be incorrect syntactically, because you can't check if a variable declaration is 0. you can of course check if the previously declared variable has a value of 0, which would be if (a==0)

same goes when you try to increment the counter value. var a + 1; is wrong, because you can't increment by 1 a declaration. you should instead assign to the existing counter, the value of itself plus 1, so a = a + 1;

finally, when you try to reset the counter, var a==0;, (beside the usual declaration error) remember that == is comparison and = is assignment. You shouldn't check if the counter is 0, you should assign the value 0 to the counter to reset it.

hope it helps

score 0 · Answer 3 · edited May 23 '17 at 12:00

Ok Few things you need to take care:

You are passing a within the function imageswap(a) and you are accessing a from the value passed within the function that'll be 0 all the time. Check https://jsfiddle.net/aegwj88g/
You are checking var a==0, var a==1 which is incorrect. It should be like if(a==0) or else if(a==1).
You are trying to assig value to a with var a + 1 which is also incorrect. Left hand side must be a valid variable other than the javascript tokens (check JS naming convention) which stores the value. it should be a=a+1 (or a+=1) just as you do in maths;

Check this fiddle:

Javascript image swap sequence

3 Answers3