title: Why are my `addEventListen` buttons only working once?
body: <p>I have three functions all of which contain <code>contents.innerHTML = 'some HTML';</code>.</p>
  
  <p>These functions are to rewrite the <code>innerHTML</code> of the div with an id of contents when called.</p>
  
  <p>I also have three buttons on the nav bar which are specified at the top of each functions <code>innerHTML</code>. I.E the buttons themselves are also being rewritten along with the rest of the HTML when a function is called.</p>
  
  <p>These buttons each have their own separate id and therefore they each have a <code>document.getElementById('button-id');</code> in the JS file.</p>
  
  <p>I then use the following event to call each function:</p>
  
  <pre><code>buttonName.addEventListener('click', () =&gt; {
    functionCall();
  });
  </code></pre>
  
  <p>My problem is that my buttons work only once. After I've clicked any of them once they do not work again. I feel like the reason is staring me in the face but I just can't see it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;main&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>const displayUser = () =&gt; {
    content.innerHTML = `
    &lt;div class="nav-panel"&gt;
      &lt;a class="nav-div-l nav-pic-bg hover"&gt;&lt;img class="nav-pic-l nav-img" src="${img.arrows[2]}" alt="Logout Arrow"&gt;
      &lt;h2 id="logout-btn"&gt;Back&lt;/h2&gt;&lt;/a&gt;
      &lt;a id="user-btn" class="nav-div-c hover"&gt;&lt;img class="nav-pic-c nav-img" src="${img.user[0]}" alt="User Picture"&gt;
      &lt;h2&gt;Username&lt;/h2&gt;&lt;/a&gt;
      &lt;a id="settings-btn" class="nav-div-r hover hide-mobile"&gt;&lt;h2&gt;Settings&lt;/h2&gt;
      &lt;img class="nav-pic-r nav-img settings-img" src="${img.symbols[2]}" alt="Settings Cog"&gt;&lt;/a&gt;
      &lt;a class="settings-btn hide-desktop"&gt;&lt;img class="nav-img" src="${img.symbols[2]}" alt="Settings Cog"&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    --- MORE NON NAV RELATED HTML ---
    `;
  };
  </code></pre>
  
  <p>All three functions look exactly the same as this in terms of the nav HTML.</p>
  
  <pre><code>displayLists(); // load page with displayLists
  
  const logoutBtn = document.getElementById('logout-btn'); // nav links
  const userBtn = document.getElementById('user-btn');
  const settingsBtn = document.getElementById('settings-btn');
  
  logoutBtn.addEventListener('click', () =&gt; {
    displayLists()
  }); // change to lists page
  
  userBtn.addEventListener('click', () =&gt; {
    displayUser()
  }); // change to user page
  
  settingsBtn.addEventListener('click', () =&gt; {
    displaySettings()
  }); // change to settings page
  </code></pre>