CODEWITHSUNDEEP
javascript
Cat man
Cat man

Reputation: 3

Trying to change an image using an array in JavaScript

<!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

Upvotes: 0

Views: 489

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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>

Upvotes: 0

Tolokoban
Tolokoban

Reputation: 2339

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];
});

Upvotes: 0

Poul Kruijt
Poul Kruijt

Reputation: 71901

Lots of things going wrong here:

  1. Parenthese around the if statements
  2. Closing body tag after closing html tag
  3. 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>

Upvotes: 1

Related Questions