How to switch between two images using one button (html/js)

Question

I'm aware there is an error (I've tried to preview my code on a browser and the button fails to work) but I'm unable to spot it and would like to make my code more efficient if possible.

<!DOCTYPE html>
<html>
<body>

<h1>Mood Changer</h1>

<button onclick="ChangeImage()">Change Mood</button>

<img id="myImage" src="Images/sad.png" style="width:100px">

<script>
    var index = 0;
    var ImageList = newArray(1);
    ImageList[0] = "Images/sad.png";
    ImageList[1] = "Images/smiley.png";
    
    function ChangeImage()
    {
     index = index + 1;
      If (index ==ImageList.length)
      {
       index = 0;
      }
      var image1 = document.getElementById("myImage");
      image1.src = ImageList[index];
    }
</script>

</body>
</html>

score 2 · Answer 1 · edited Jan 11 '21 at 16:31

Your code is almost fine, you had just few errors which I've refactored.

var index = 0;
var imageList = ['https://images.squarespace-cdn.com/content/v1/5b635679ee17591ac752ba2b/1542322345489-AKVORNCEJXZXFLIRIVAX/ke17ZwdGBToddI8pDm48kA9rhCjhJUYcQpKsBaLXN1ZZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIye_uGeP4isZUnhF2J4BSLX0iSmbQA7pLf20f1CNe8SkKMshLAGzx4R3EDFOm1kBS/shutterstock_489006448.jpg?format=2500w', 'https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png'];

function changeImage() {
  index = index + 1;
  if (index == imageList.length) {
     index = 0;
  }
  var image1 = document.getElementById("myImage");
  image1.src = imageList[index];
}

<h1>Mood Changer</h1>


<button onclick="changeImage()">Change Mood</button>

<img id="myImage" src="http://wallpaper-gallery.net/images/image/image-13.jpg" style="width:100px">

score 1 · Answer 2 · answered Feb 09 '17 at 22:30

see this example below

<html>
<head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
}
</script>
</head>
<body>
<img src="" alt="Images" id="imageReplace"/><br />
<a href="#" onclick="changeImage('developervarun.png');">Link1</a>
<a href="#" onclick="changeImage('himalayas.jpg');">Link2</a>
</body>
</html>

Korgrue · Answer 3 · 2017-02-09T22:04:59.187

0

newArray(1); is not a function.

Try this instead.

var ImageList = [];

This will create an empty array for you to push your image list into.

also, the keyword "if" needs to be all lowercase. Change "If" to "if".

edited Feb 09 '17 at 22:04

answered Feb 09 '17 at 21:56

Korgrue

3,430
1
13
20

score 0 · Answer 4 · edited May 23 '17 at 12:33

A few observations:

You're array syntax is a bit off, consider something like this:

var ImageList = [];
ImageList.push("Images/sad.png")
ImageList.push("Images/smiley.png")

In javascript, conditional keywords are lower case (if instead of If)

Consider index += 1 instead of index = index + 1

Check out this stackoverflow question for a discussion on the Difference between == and === in JavaScript

How to switch between two images using one button (html/js)

4 Answers4