title: Function executes only once when using onClick event [javascript]
body: <p>I am trying to randomly change background image of a div (#reaction-background) after every click of a button (#angry) with onclick event.
  However, the background image only changes once after clicking the button.</p>
  
  <p>HTML:
  </p>
  
  <pre><code>&lt;div class="btn-list"&gt;
        &lt;a id="angry"&gt;ANGRY&lt;/a&gt;
        &lt;div id="reaction-background"&gt;&lt;/div&gt;
  </code></pre>
  
  
  
  <p>Javascript:
  </p>
  
  <pre class="lang-js prettyprint-override"><code>// array of pictures
  var fileNamesReactions = [
    "angry1.jpg",
    "angry2.jpg",
    "angry3.jpg",
    "angry4.jpg",
    "angry5.jpg"
  ];
  // random reaction index
  var randomIndexReaction = Math.floor(Math.random() * fileNamesReactions.length);
  // randomize pictures
  document.getElementById("angry").onclick = function() {
    document.getElementById("reaction-background").style.background = "url(./img/reactions/angry/" + fileNamesReactions[randomIndexReaction] + ")";
    document.getElementById("reaction-background").style.backgroundRepeat = "no-repeat";
    document.getElementById("reaction-background").style.backgroundSize = "contain";
  }
  </code></pre>