title: JavaScript keep image change in HTML
body: <p>I want to change the background image of a container by setting CSS rules with Javascript on a button click. </p>
  
  <p>This works, but the image changes back almost immediately. Is there any way to keep the changes?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="knoppen"&gt;
      &lt;div class="roundbutton" onclick="ImageChange1();" style="background-image:url(Image_Thumb.jpg); background-position: center; background-size: cover;"&gt;
        &lt;a href="" class="buttonlink"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="roundbutton" onclick="ImageChange2();" style="background-image:url(.png); background-position: center; background-size: cover;"&gt;
        &lt;a href="" class="buttonlink"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="roundbutton" onclick="ImageChange3();" style="background-image:url(.png); background-position: center; background-size: cover;"&gt;
        &lt;a href="" class="buttonlink"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="roundbutton" onclick="ImageChange4();" style="background-image:url(.png); background-position: center; background-size: cover;"&gt;
        &lt;a href="" class="buttonlink"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="roundbutton" onclick="ImageChange5();" style="background-image:url(.png); background-position: center; background-size: cover;"&gt;
        &lt;a href="" class="buttonlink"&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS:</strong> </p>
  
  <pre><code>function ImageChange1() {
    document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
  }
  
  function ImageChange2() {
    document.getElementById("container").style.backgroundImage = "url('Image2.jpg')";
  }
  
  function ImageChange3() {
    document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
  }
  
  function ImageChange4() {
    document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
  }
  
  function ImageChange5() {
    document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
  }
  </code></pre>