CODEWITHSUNDEEP
javascriptarraysbutton
Chrissy
Chrissy

Reputation: 11

what are the errors within my code , as it can't change the images with one button?

Here is the code I have so far, and all it can do is display the first image however once the button is pressed the image doesn't change and I'm not sure what to do?

var index = 0;
var ImageList = ["Images\sad.png", "Images\happy.png"];

function changeImage() {
  index = index + 1;
  if (index == ImageList.length) {
    index = 0;
    'at this point it is supposed to change the image'
  }
  var image1 = document.getElementById("myImage");
  image1.src = ImageList[index];
}
<button onclick="changeImage()">Change emotions</button>
<img id="myImage" src="Images\happy.png" style="width:200px">

Upvotes: 0

Views: 38

Answers (5)

Efemorav
Efemorav

Reputation: 143

The issue is in the backslashes. What do you use them for? In javascript the backslashes in strings are for special characters, so when you change img.src = list[index] it will change from Images\happy to Imageshappy

your code working I'm supposing your images are in a folder called 'Images'.

var index=0;
var ImageList = ["Images/happy.png", "Images/sad.png"]; 
function changeImage(){ 
  index=index+1;
  if(index==ImageList.length){
   index=0;  
  }
  var image1= document.getElementById("myImage");
  console.log(image1);
  image1.src= ImageList[index];
  console.log(image1);
}
<button onclick = "changeImage()">Change emotions</button> 
<img id="myImage" src="Images/happy.png" style="width:200px">

Upvotes: 0

knox-flaneur
knox-flaneur

Reputation: 149

Instead of an if statement for toggling between 0 and 1 (assuming you're only going to have two images), you can use a ternary operator:

(index === 0) ? (index = 1) : (index = 0);

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

Not sure if you had this in the code all along or if you added it for this post, but wrote a comment that was invalid syntax:

'at this point it is supposed to change the image'

Comments should be like this:

// at this point it is supposed to change the image

Your slashes in your image paths should be forward and not backslashes as well.

See comments inline with the code for other corrections and explanation:

var index = 0;
// Paths should always use forward-slashes, not back-slashes
var ImageList = ["http://images.clipartpanda.com/apple-clipart-apple5.png",
                 "http://web.utk.edu/~gduscher/images/orange.jpg"]; 

// Get your reference to the image element outside of the function 
// so you don't have to keep getting it every time the button is clicked.
var image1 = document.getElementById("myImage");

function changeImage() { 

  // Increment the index counter by 1
  index = index + 1;  // could just write: index++
  
  // If the index has gone too high, reset it to zero
  if(index == ImageList.length){
    index=0; // You wrote your comment wrong: 'at this point it is supposed to change the image' 
  }
  
  // Set the source of the image
  image1.src= ImageList[index];
}
img { width: 50px; }
<button onclick = "changeImage()">Change emotions</button> 
<img id="myImage" src="http://images.clipartpanda.com/apple-clipart-apple5.png" style="width:200px">

Upvotes: 0

kind user
kind user

Reputation: 41893

You should set a global variable containing the reference to the element instead of setting it with every function call.

Another thing - your index was initially set to 0 and the default img was the image on the second position in array, with index 1, so with the first function call nothing was happening because the src wasn't changed.

var index = 0;
var ImageList = ["http://placehold.it/350x150", "http://placehold.it/150x150"];
var image1 = document.getElementById("myImage");

function changeImage() { 
  image1.src = ImageList[index];
  if (index < ImageList.length-1) {
    index = index + 1;
  } else {
    index = 0;
  }
    
}
<img id="myImage" src="http://placehold.it/150x150" style="width:200px">
<button onclick="changeImage()">Change emotions</button>

Upvotes: 1

Mahpooya
Mahpooya

Reputation: 559

you must escape your backslash in file paths.

var ImageList = ["Images\\sad.png","Images\\happy.png"];

your code with changes:

var index=0;
var ImageList = ["Images\\sad.png","Images\\happy.png"]; 
function changeImage(){ 
    index=index+1;
    if(index==ImageList.length){
        index=0; 'at this point it is supposed to change the image' 
    }
    var image1= document.getElementById("myImage");
    image1.src= ImageList[index];
}
<button onclick = "changeImage()">Change emotions</button> 
<img id="myImage" src="Images\happy.png" style="width:200px">

Upvotes: 0

Related Questions