Question

I have a div with the id “art”. This div should have the background “S1_img1.jpg”. Below the div there’s a button and when I click it, the background image has to change to “S1_img2.jpg”.

When I click it again it has to change to “S1_img3.jpg” and it goes on like that. However, img4 is the last one. Meaning when the div background is currently set as img4 and I click the button again, it must change back to img1.

I am trying to accomplish this by using javascript but I can’t get it to work.

1) When I use the code below, the image does not show as the background, even if I am sure the image path is correct.

<script type="text/javascript">
document.getElementById("art").style.backgroundImage = "url(content/art/S1/S1_img1.jpg)";</script>

2) How can I make it so that it changes the background when I click the button as I described?

At the moment the onClick of the button executes the javascript function “count();”.

<script type="text/javascript">
var img = 1;

function count() {
    img = img + 1;
    document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)";
}
</script>

Answer 1

You can use the condition for that

<script type="text/javascript">
var img = 1;

function count() {
img = img + 1;
document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img"+img+".jpg)";
if (img==4) img=0;
}
</script>