title: How to add event listener to submit button
body: <p>I am having many troubles with this html. I am trying to add an event listener to a submit button so that I can eventually change the document to display the form information. The problem is, when the form is filled, the button listener does nothing! (It works in jsfiddle and other things like it, but won't work as stand alone files, which leads me to believe I set my files up incorrectly somehow, possibly messed up with the script tag). I have tried many things, including moving the script tag around, trying to get event listener submit of form, and input type button but still nothing. Can anyone help here?</p>
  
  <p>My HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Form Project&lt;/title&gt;
    &lt;style type="text/css" rel="stylesheet"&gt;
      #but{text-align:center;}
      td{text-align:right;}
      span{padding=0; margin=0;float:left;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;form id="formId"&gt;
    &lt;table border = "1"&gt;
  
      &lt;tr&gt;
        &lt;th&gt;Provide your contact information&lt;/th&gt;
        &lt;th&gt;Provide your login access information&lt;/th&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;First Name:&lt;/span&gt; &lt;input type = "text" placeholder = "Enter First Name" required/&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;Login ID:&lt;/span&gt; &lt;input type = "text" placeholder = "type a login ID" required/&gt;&lt;/label&gt;  &lt;/td&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;Middle Name:&lt;/span&gt; &lt;input type="text" placeholder ="type your middle name"/&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;Password:&lt;/span&gt; &lt;input type="password" placeholder ="password" required/&gt;&lt;/label&gt;&lt;/td&gt;  
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;Last Name:&lt;/span&gt; &lt;input type="text" placeholder="Last Name" required/&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;td id="but"&gt;&lt;label&gt;&lt;button type="submit" id="displayButton"&gt;Display Info&lt;/button&gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt; 
  
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;Street Address:&lt;/span&gt; &lt;input type="text" placeholder="address" required/&gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label for ="Citylist"&gt;&lt;span&gt;City:&lt;/span&gt;
          &lt;input type = "text" id ="citylist"
          placeholder="Select a city" list = "cities" required/&gt;
          &lt;datalist id= "cities"&gt;
            &lt;option value = "Bronx"/&gt;
            &lt;option value = "Brooklyn"/&gt;
            &lt;option value = "Queens"/&gt;
            &lt;option value = "Manahttan"/&gt;
            &lt;option value = "Staten Island"/&gt;
          &lt;/datalist&gt;
          &lt;/label&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
      &lt;td&gt;&lt;label for ="StateList"&gt;&lt;span&gt;State:&lt;/span&gt;
          &lt;input type = "text" id ="State"
          placeholder="Select a city" list = "states" required/&gt;
          &lt;datalist id= "states"&gt;
            &lt;option value = "New York"/&gt;
            &lt;option value = "New Jersey"/&gt;
            &lt;option value = "California"/&gt;
            &lt;option value = "Virginia"/&gt;
            &lt;option value = "Maine"/&gt;
          &lt;/datalist&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
        &lt;td&gt;&lt;label&gt;&lt;span&gt;Zip code:&lt;/span&gt; &lt;input type="text" placeholder="Type your zipcode" maxlength="5" required/&gt;&lt;/label&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;label&gt;&lt;span&gt;Phone&lt;/span&gt;
            &lt;input type ="tel" placeholder="(123)456-789"
            pattern="\(\{3}) +\d{3}-\d{4}" required/&gt;
          &lt;/label&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;label&gt;&lt;span&gt;Email:&lt;/span&gt;
            &lt;input type="email" placeholder="name@domain.com" required/&gt; 
          &lt;/label&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;label&gt;&lt;span&gt;Birth Date:&lt;/span&gt;
            &lt;input type="date" required/&gt;
          &lt;/label&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
   &lt;/form&gt;
   &lt;script type="text/javascript" src="form.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JS, simplified just for eventlistener: </p>
  
  <pre><code>var button = document.getElementById("displayButton");
  //var form = document.getElementById("formId");
  //form.addEventListener("submit",function(){console.log("something1"); return false;},false);
  button.addEventListener("click", function(){console.log("something"); return false;},false);
  
  function formDisplay(){
      console.log("check");
  }
  </code></pre>
  
  <p>It works when there the entire form IS NOT filled, but if all the required fields are filled then the console does not show up with "something". </p>