title: Change background images on click
body: <p>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". </p>
  
  <p>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.</p>
  
  <p>I am trying to accomplish this by using javascript but I can't get it to work.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  document.getElementById("art").style.backgroundImage = "url(content/art/S1/S1_img1.jpg)";&lt;/script&gt;
  </code></pre>
  
  <p>2) How can I make it so that it changes the background when I click the button as I described?</p>
  
  <p>At the moment the onClick of the button executes the javascript function "count();".</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var img = 1;
  
  function count() {
      img = img + 1;
      document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)";
  }
  &lt;/script&gt;
  </code></pre>