JavaScript: simple image load on button click

Question

I am fairly new to JavaScript, though not to programming. My exercise is to have a page that shows an image and allows the user to go to next/previous image by clicking on a button. I want to load the next/previous image from the server on the button click, so the page doesn't have to load all the images into the browser at once.

This version just has a button to go to the next image, and I'm trying to load it with jQuery or AJAX. The page loads the initial "image0", and the JavaScript debugger shows that the onClick event executes and does what I would expect, but the image doesn't change.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var imageIndex = 0;
var jpgImageName = "image0"
var loadString = "images/" + jpgImageName + ".JPG";

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  var loadString = $("<img />").attr('src', locationString);
  $("imageSlot").append(loadString);
}

</script>
</head>
<body>

<div id="imageSlot">
  <img id="currentImage" src="images/image0.JPG" height="400" alt="image"+imageIndex/>
</div>
<button id="changeImage" onclick="changeImage()">Change Image</button>

</body>
</html>

I got the append function from another Stack Overflow example. I want to replace the current image, and have seen a suggestion to use html() instead of append() for that, but figured I'd try to get this working before I started changing the example.

I've also tried a .load() function on the image itself with just the URL for the next image. That didn't work either, though attempting to show both in the above example seemed likely to confuse people reading the question. But if you want to show me how to solve it that way, or both ways, that'd be great.

Cycling is usually written as imageIndex = (imageIndex + 1) % 3;. — katspaugh
– katspaugh, Commented Oct 8, 2012 at 15:28

Adam Pollock · Accepted Answer · 2012-10-08 14:19:34Z

3

If you are wanting to replace the current image with the next one, then you could try just changing the src of the current image directly:

function changeImage()
{
  imageIndex++;
  if (imageIndex > 2) { imageIndex = 0; }
  var locationString = "images/image" + imageIndex + ".JPG";
  $('#currentImage').attr('src', locationString);
}

answered Oct 8, 2012 at 14:19

Adam Pollock

1113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arcy Over a year ago

Thanks. I'd still like to know what was wrong with the other one, but at least this does what I was asking about.

Chandra Sekhar Walajapet · Accepted Answer · 2012-10-08 14:11:18Z

0

Can you try with $("#imageSlot").append(loadString); ?

answered Oct 8, 2012 at 14:11

Chandra Sekhar Walajapet

2,55418 silver badges24 bronze badges

Comments

David 10K · Accepted Answer · 2012-10-08 14:19:53Z

0

Change the line to

$('img').attr('src', locationString);

and delete the append()- line

edited Oct 8, 2012 at 14:19

answered Oct 8, 2012 at 14:14

David 10K

3032 silver badges15 bronze badges

Comments

crunchBar · Accepted Answer · 2012-10-08 20:00:38Z

0

Try something like the following for your function:

  function changeImage(){
      imageIndex++;
      imageIndex = imageIndex % 2; //here '2' is the number of images you have (result is always 0 or 1 in this case)
      var locationString = "images/image" + imageIndex + ".JPG";
      $('#currentImage').attr('src', locationString);//set the 'src' attribute inline

  }

edited Oct 8, 2012 at 20:00

answered Oct 8, 2012 at 14:36

crunchBar

1114 bronze badges

1 Comment

arcy Over a year ago

The ".currentImage" would identify a class, but what I have is an id. otherwise this is the same as another one given below.

Collectives™ on Stack Overflow

JavaScript: simple image load on button click

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related