title: function works on page load but not on button click
body: <p>I'm trying to get my web app to run when clicked but it only works when the page is initially loaded. If I keep pressing f5 it will select an item randomly and work correctly. But I'd like for it to do so when the 'next' button is pressed.</p>
  <p>I'm attempting to change the 'locationTitle' id to a random item from myArray.</p>
  <p>When I open up the developer tools and click on the 'NEXT' button, it flashes on the 'locationTitle' value of the div.</p>
  <pre><code>let myArray = [
      'Boardwalk', 
      'Highland Park', 
      'Waterfront',
      'Beach', 
      'North End', 
      'Canal',
      'Wiley Island', 
      'Conservation Park', 
      'Dufferin Falls',
      'Old Town',
  ]
  
  const random = Math.floor(Math.random() * myArray.length);
  console.log(myArray[random]);
  
  let my_btn = document.getElementById(&quot;my_btn&quot;);
  
  function nextElement() {
      document.getElementById(&quot;locationTitle&quot;).innerHTML = (myArray[random]);
      
  
  }
  
  
  window.addEventListener(&quot;load&quot;, nextElement);
  my_btn.addEventListener(&quot;click&quot;, nextElement);
  
  
  html:
  &lt;button id = &quot;my_btn&quot; onclick = &quot;nextElement()&quot; ;&gt;NEXT&lt;/button&gt;
  </code></pre>