CODEWITHSUNDEEP
javascripthtml
user7542721
user7542721

Reputation:

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

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>

Upvotes: 0

Views: 4414

Answers (4)

kind user
kind user

Reputation: 41893

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

Upvotes: 2

varunkumar
varunkumar

Reputation: 340

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>

Upvotes: 1

smeckydev
smeckydev

Reputation: 523

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

Upvotes: 0

Korgrue
Korgrue

Reputation: 3478

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".

Upvotes: 0

Related Questions