Trying to change an image using an array in JavaScript

Question

<!DOCTYPE html> 
<html>
<body>
<img id="myImage" src="Red.jpg" width="209" height="241">
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
<script> 
index=(0)
var traffic = ["Red","Rambo","Green","Yellow"]
function changeImage() {
    var image = document.getElementById('Light');
    if traffic[index] === "Red" {
        image.src = "Rambo.jpg";
        index= (index+1)
    } else if traffic[index] === "Rambo" {
        image.src = "Green.jpg";
         index= (index+1)
    } else if traffic[index] === "Green" {
        image.src = "Yellow.jpg";
        index= (index+1)
    } else {
        image.src = "Red.jpg";
        index=0
    }
}
</script>
</html>
</body>

this is my code I don't understand why when i click the button the image doesn't change the images are all .jpg files are all contained inside the same folders and all are the same size any ideas why is will not change the image i'm currently guessing it's something to do with the === or the fact i'm using words instead of numbers for them

What about the parentheses around the if statements? (traffic[index] === "Red") -->()()()() those thingies. Why is the ending body tag after the closing html tag. Why doesn't the id in document.getElementByid the same as the id of the img tag. Why are there parentheses around the 0. Why is there no var in front of index — Poul Kruijt
– Poul Kruijt, Commented Mar 10, 2016 at 13:54

Poul Kruijt · Accepted Answer · 2016-03-10 13:59:36Z

Lots of things going wrong here:

Parenthese around the if statements
Closing body tag after closing html tag
document.getElementById does not get the same id as the img id

So, this will work, but perhaps checking the javascript and HTML syntax first might be a good start:

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="Red.jpg" width="209" height="241">
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
<script>
    var index = 0;
    var traffic = ["Red","Rambo","Green","Yellow"];
    var image = document.getElementById('myImage');

    function changeImage() {
        if (traffic[index] === "Red") {
            image.src = "Rambo.jpg";
            index++;
        } else if (traffic[index] === "Rambo") {
            image.src = "Green.jpg";
            index++;
        } else if (traffic[index] === "Green") {
            image.src = "Yellow.jpg";
            index++;
        } else {
            image.src = "Red.jpg";
            index = 0;
        }
    }
</script>

</body>
</html>

Tolokoban · Accepted Answer · 2016-03-10 14:13:17Z

There are few little mistakes in your code. The id of your image is myImage, but you wrote var image = document.getElementById('Light'); which result on undefined. As mentioned by PierreDuc, you missed parenthesis around if conditions.

Take a look at this example : https://jsfiddle.net/1wjn943x/

var images = [
    "http://openphoto.net/thumbs2/volumes/mylenebressan/20120720/openphotonet_11.jpg",
    "http://openphoto.net/thumbs2/volumes/sarabbit/20120322/openphotonet_DSCF5890.JPG",
    "http://openphoto.net/thumbs2/volumes/Sarabbit/20120117/openphotonet_gerberadaisy3.jpg"
];
var index = 0;
var img = document.getElementById("myImage");

document.getElementById("button").addEventListener('click', function() {
  // Next image.
  index = (index + 1) % images.length;
  // Setting `src`attribute of <img>.
  img.src = images[index];
});

Mr. Polywhirl · Accepted Answer · 2016-03-10 15:26:48Z

This is the easiest way to change the image.

Simply set the image source to be the next image in the array. You need to use the mod operator to loop from the end; back to the beginning.

Array - Index Pointer

var imageEl = document.getElementById('Light');
var index = 0;
var images = [
  "http://placehold.it/150x150/FF0000/FFFFFF.jpg?text=Red",
  "http://placehold.it/150x150/0000FF/FFFFFF.jpg?text=Rambo",
  "http://placehold.it/150x150/00FF00/FFFFFF.jpg?text=Green",
  "http://placehold.it/150x150/FFFF00/FFFFFF.jpg?text=Yellow"
];

function changeImage() {
  imageEl.src = images[index++ % images.length]; // Set and increment the image index.
}

changeImage();

<img id="Light" width="150" height="150">
<br />
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>

Map - Linked Pointer

var imageEl = document.getElementById('Light');
var currImage = '';
var images = {
  red : {
    src : "http://placehold.it/150x150/FF0000/FFFFFF.jpg?text=Red",
    next : 'rambo'
  },
  rambo : {
    src : "http://placehold.it/150x150/0000FF/FFFFFF.jpg?text=Rambo",
    next : 'green'
  },
  green : {
    src : "http://placehold.it/150x150/00FF00/FFFFFF.jpg?text=Green",
    next : 'yellow'
  },
  yellow : {
    src : "http://placehold.it/150x150/FFFF00/FFFFFF.jpg?text=Yellow",
    next : 'red'
  }
};

function changeImage() {
  (function(img) {
    imageEl.src = img.src; // Set the image source to the current image.
    currImage = img.next;  // Set current image as the next image.
  }(images[currImage || 'red']));
}

changeImage();

<img id="Light" width="150" height="150">
<br />
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>

Class - Circular Iterator

var CircularIterator = function(iterable) {
  this.iterable = iterable || [];
  this.index = 0;
  this.get = function(index) {
    return this.iterable[index] || this.next();
  };
  this.size = function() {
    return this.iterable.length;
  };
  this.incr = function() {
    return this.index = ((this.index + 1) % this.size());
  };
  this.next = function() {
    return this.get(this.incr());
  };
  this.first = function() {
    return this.get(0);
  };
  this.last = function() {
    return this.get(this.size() - 1);
  };
};

var imageEl = document.getElementById('Light');
var iterable = new CircularIterator([
  "http://placehold.it/150x150/FF0000/FFFFFF.jpg?text=Red",
  "http://placehold.it/150x150/0000FF/FFFFFF.jpg?text=Rambo",
  "http://placehold.it/150x150/00FF00/FFFFFF.jpg?text=Green",
  "http://placehold.it/150x150/FFFF00/FFFFFF.jpg?text=Yellow"
]);

function changeImage() {
  imageEl.src = iterable.next(); // Set and increment the image index.
}

imageEl.src = iterable.first();  // Set the current image to the first.

<img id="Light" width="150" height="150">
<br />
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>

Collectives™ on Stack Overflow

Trying to change an image using an array in JavaScript

3 Answers 3

Comments

Comments

Array - Index Pointer

Map - Linked Pointer

Class - Circular Iterator

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Array - Index Pointer

Map - Linked Pointer

Class - Circular Iterator

Comments

Your Answer

Sign up or log in

Post as a guest

Related