title: Get Element Breaking Code
body: <p>I'm trying to improve my Javascript by starting a simple web interface, but every time I try to add an event listener to an input field, it breaks my code.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="colors.css"&gt;
          &lt;script src="spot.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;div id="ask"&gt;
          Search for an artist to see their top songs:
      &lt;/div&gt;
  
      &lt;form&gt;
          &lt;input type="text" name="artist" id="artist-search"&gt;
      &lt;/form&gt;
      &lt;div id="sub"&gt;
          submit
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's my Javascript:</p>
  
  <pre><code>window.onload = loaded;
  
  var inField;
  
  function loaded() {
      document.getElementById("sub").addEventListener("click", search);
      inField = document.getElementById("artist-search");
  }
  
  //https://api.spotify.com/v1/search?q=tania%20bowra&amp;type=artist
  function search() {
      alert();
      //var query = "//https://api.spotify.com/v1/search?q=";
  }
  </code></pre>
  
  <p>When I add the getElementById to "artist-search", the alert in the search function stops working. Why is this? And is there a better way to get the text in an input field when someone clicks a submit button using vanilla Javascript?</p>