title: Dynamically pass a url parameter from one page to another when clicking <a href...> with event listener
body: <p>I am trying to send a url parameter (in this instance an ID) to another page when clicking on one of the links. I have experimented with a number of methods and found one that <em>NEARLY</em> works, except that when I click a non-link element (such as a form button) it will still append the url. </p>
  
  <p>The event listener is as follows: </p>
  
  <pre><code>window.addEventListener("click", function(e) {
      var href = e.target.getAttribute("href");
      if(href) {
          location.href = href + "?id="+id_search_input;
          e.preventDefault();
      }
  });
  </code></pre>
  
  <p>The links: </p>
  
  <pre><code>    &lt;ul id="nav_ul"&gt;
          &lt;li&gt;&lt;a href="ask_q.html"&gt;Ask Questions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page1.html"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page3.html"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>What I'm trying to pass to the URL: <code>?id=0123456789</code></p>
  
  <p>I suppose that the event listener needs to be on something other than click? </p>
  
  <p>Thanks!</p>