title: I am getting a "TypeError: form is undefined" when I first load my page
body: <p>I am developing a form that i can transmit new hire data to our recruiting with JSON. I just started this but am also kinda new with Node.js and am testing as i go. Can you please let me know how i can stop this error from coming up.</p>
  
  <p>Error:
  TypeError: form is undefined <a href="http://localhost:63342/VAP_FORM/index.html:32:11" rel="nofollow noreferrer">http://localhost:63342/VAP_FORM/index.html:32:11</a></p>
  
  <p>Browser: firefox</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/**
   * Retrieves input data from a form and returns it as a JSON object.
   * @param  {HTMLFormControlsCollection} elements  the form elements
   * @return {Object}                               form data as an object literal
   */
  const formToJSON = elements =&gt; [].reduce.call(elements, (data, element) =&gt; {
  
      data[element.name] = element.value;
      return data;
  
  }, {});
    /**
     * A handler function to prevent default submission and run our custom script.
     * @param  {Event} event  the submit event triggered by the user
     * @return {void}
     */
  
  const handleFormSubmit = event =&gt; {
  
      event.preventDefault();
  
      const data = formToJSON(form.elements);
  
      const dataContainer = document.getElementsByClassName('results__display')[0];
  
      dataContainer.textContent = JSON.stringify(data, null, "  ");
      console.log(dataContainer);
  };
  /* We find the form element using its class name, then attach the
  *  `handleFormSubmit()` function to the 
  * `submit` event.
  */
  const form = document.getElementsByClassName('contact-form')[0];
  form.addEventListener('submit', handleFormSubmit);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.valid{
    border:1px solid blue;
  }
  .invalid{
    border:1px solid red;
  }
  .column {
      float: left;
      padding: 10px;
      height: 300px; /* Should be removed. Only for demonstration */
  }
  .left{
    width: 10%;
  }
  .right {
    width: 30%;
  }
  .middle {
    width: 60%;
    min-width: 300px;
    height: 100%;
  }
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
  #vapheading {
      color: black;
      font-family: Avenir;
  
  }
  #form{
      color: white;
      background-color: navy;
      padding: 16px;
      border-radius: 25px;
  }
  @media only screen and (max-width: 1026px) {
      #left,#right {
          display: none;
      }
  }
  input {
      border: 4px solid whitesmoke;
      border-radius: 25px;
      background-color: whitesmoke;
  }
  select {
      border: 4px solid whitesmoke;
      border-radius: 25px;
      background-color: whitesmoke;
  }
  body{
      background-color: lightgrey;
      color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="vap_css.css"/&gt;
        &lt;script src="vap_script.js"&gt;&lt;/script&gt;
        &lt;script&gt;
          function validateForm() {
              var x = document.forms["myForm"]["ssn1"].value;
              var y = document.forms["myForm"]["ssn2"].value;
              if (x !== y ){
                  alert("Social Security number does not match");
                  return false;
              }
  
          }
  
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="row"&gt;
        &lt;div class="column left" id="left"&gt;&lt;/div&gt;
        &lt;div class="column middle" id="middle"&gt;
          &lt;h2 id = "vapheading"&gt;Please fill out the Following Form&lt;/h2&gt;
            &lt;div id = "form"&gt;
            &lt;form class="contact-form__label" name="myForm" onsubmit="return validateForm()"&gt;
              &lt;table id = "table"&gt;
                &lt;tr&gt;
                    &lt;td&gt;First Name:* &lt;br/&gt;&lt;input type="text" name="firstname" id="fname" required/&gt;&lt;/td&gt;
                    &lt;td&gt;Middle Name: &lt;br/&gt;&lt;input type="text" name="middlename" id="mname" /&gt;&lt;/td&gt;
                    &lt;td&gt;Last Name:* &lt;br/&gt;&lt;input type="text" name="lastname" id="lname" required/&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;Suffix: &lt;br/&gt;&lt;input type="text" name="suffix" id="suffix" /&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/table&gt;
              &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;SSN:* &lt;br/&gt;&lt;input class="required-input" id="ssn1" maxlength="9" type="password" name="ssn1" required/&gt;&lt;/td&gt;
                &lt;td&gt;Verify SSN:* &lt;br/&gt;&lt;input class="required-input" id="ssn2" maxlength="9" type="password" name="ssn2" required/&gt;&lt;/td&gt;
                &lt;td&gt;Date of Birth:* &lt;br/&gt;&lt;input type="date" name="birthday"  id="bday" required/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;table&gt;
              &lt;tr&gt;
                &lt;td&gt;Place of Birth - City:* &lt;br/&gt;&lt;input type="text" name="city" id="city"  required/&gt;&lt;/td&gt;
                &lt;td&gt;Place of Birth - State: &lt;br/&gt;&lt;input type="text" name="state"  id="state" &gt;&lt;/td&gt;
                &lt;td&gt;Place of Birth - Country:* &lt;br/&gt;&lt;select name="country"  id="country" required&gt;
                  &lt;option value=""&gt;Choose Here&lt;/option&gt;
                  &lt;option value="Afghanistan"&gt;Afghanistan&lt;/option&gt;&lt;option value="Albania"&gt;Albania&lt;/option&gt;&lt;option value="Algeria"&gt;Algeria&lt;/option&gt;&lt;option value="Andorra"&gt;Andorra&lt;/option&gt;
                  &lt;option value="Angola"&gt;Angola&lt;/option&gt;&lt;option value="Antigua &amp; Deps"&gt;Antigua &amp; Deps&lt;/option&gt;&lt;option value="Argentina"&gt;Argentina&lt;/option&gt;
                  &lt;option value="Armenia"&gt;Armenia&lt;/option&gt;&lt;option value="Australia"&gt;Australia&lt;/option&gt;&lt;option value="Austria"&gt;Austria&lt;/option&gt;
                  &lt;option value="Azerbaijan"&gt;Azerbaijan&lt;/option&gt;&lt;option value="Bahamas"&gt;Bahamas&lt;/option&gt;&lt;option value="Bahrain"&gt;Bahrain&lt;/option&gt;
                  &lt;option value="Bangladesh"&gt;Bangladesh&lt;/option&gt;&lt;option value="Barbados"&gt;Barbados&lt;/option&gt;&lt;option value="Belarus"&gt;Belarus&lt;/option&gt;
                  &lt;option value="Belgium"&gt;Belgium&lt;/option&gt;&lt;option value="Belize"&gt;Belize&lt;/option&gt;&lt;option value="Benin"&gt;Benin&lt;/option&gt;
                  &lt;option value="Bhutan"&gt;Bhutan&lt;/option&gt;&lt;option value="Bolivia"&gt;Bolivia&lt;/option&gt;&lt;option value="Bosnia Herzegovina"&gt;Bosnia Herzegovina&lt;/option&gt;
                  &lt;option value="Botswana"&gt;Botswana&lt;/option&gt;&lt;option value="Brazil"&gt;Brazil&lt;/option&gt;&lt;option value="Brunei"&gt;Brunei&lt;/option&gt;
                  &lt;option value="Bulgaria"&gt;Bulgaria&lt;/option&gt;&lt;option value="Burkina"&gt;Burkina&lt;/option&gt;&lt;option value="Burundi"&gt;Burundi&lt;/option&gt;
                  &lt;option value="Cambodia"&gt;Cambodia&lt;/option&gt;&lt;option value="Cameroon"&gt;Cameroon&lt;/option&gt;&lt;option value="Canada"&gt;Canada&lt;/option&gt;
                  &lt;option value="Cape Verde"&gt;Cape Verde&lt;/option&gt;&lt;option value="Central African Rep"&gt;Central African Rep&lt;/option&gt;&lt;option value="Chad"&gt;Chad&lt;/option&gt;
                  &lt;option value="Chile"&gt;Chile&lt;/option&gt;&lt;option value="China"&gt;China&lt;/option&gt;&lt;option value="Colombia"&gt;Colombia&lt;/option&gt;
                  &lt;option value="Comoros"&gt;Comoros&lt;/option&gt;&lt;option value="Congo"&gt;Congo&lt;/option&gt;&lt;option value="Congo {Democratic Rep}"&gt;Congo {Democratic Rep}&lt;/option&gt;
                  &lt;option value="Costa Rica"&gt;Costa Rica&lt;/option&gt;&lt;option value="Croatia"&gt;Croatia&lt;/option&gt;&lt;option value="Cuba"&gt;Cuba&lt;/option&gt;
                  &lt;option value="Cyprus"&gt;Cyprus&lt;/option&gt;&lt;option value="Czech Republic"&gt;Czech Republic&lt;/option&gt;&lt;option value="Denmark"&gt;Denmark&lt;/option&gt;
                  &lt;option value="Djibouti"&gt;Djibouti&lt;/option&gt;&lt;option value="Dominica"&gt;Dominica&lt;/option&gt;&lt;option value="Dominican Republic"&gt;Dominican Republic&lt;/option&gt;
                  &lt;option value="East Timor"&gt;East Timor&lt;/option&gt;&lt;option value="Ecuador"&gt;Ecuador&lt;/option&gt;&lt;option value="Egypt"&gt;Egypt&lt;/option&gt;
                  &lt;option value="El Salvador"&gt;El Salvador&lt;/option&gt;&lt;option value="Equatorial Guinea"&gt;Equatorial Guinea&lt;/option&gt;&lt;option value="Eritrea"&gt;Eritrea&lt;/option&gt;
                  &lt;option value="Estonia"&gt;Estonia&lt;/option&gt;&lt;option value="Ethiopia"&gt;Ethiopia&lt;/option&gt;&lt;option value="Fiji"&gt;Fiji&lt;/option&gt;
                  &lt;option value="Finland"&gt;Finland&lt;/option&gt;&lt;option value="France"&gt;France&lt;/option&gt;&lt;option value="Gabon"&gt;Gabon&lt;/option&gt;
                  &lt;option value="Gambia"&gt;Gambia&lt;/option&gt;&lt;option value="Georgia"&gt;Georgia&lt;/option&gt;&lt;option value="Germany"&gt;Germany&lt;/option&gt;
                  &lt;option value="Ghana"&gt;Ghana&lt;/option&gt;&lt;option value="Greece"&gt;Greece&lt;/option&gt;&lt;option value="Grenada"&gt;Grenada&lt;/option&gt;
                  &lt;option value="Guatemala"&gt;Guatemala&lt;/option&gt;&lt;option value="Guinea"&gt;Guinea&lt;/option&gt;&lt;option value="Guinea-Bissau"&gt;Guinea-Bissau&lt;/option&gt;
                  &lt;option value="Guyana"&gt;Guyana&lt;/option&gt;&lt;option value="Haiti"&gt;Haiti&lt;/option&gt;&lt;option value="Honduras"&gt;Honduras&lt;/option&gt;
                  &lt;option value="Hungary"&gt;Hungary&lt;/option&gt;&lt;option value="Iceland"&gt;Iceland&lt;/option&gt;&lt;option value="India"&gt;India&lt;/option&gt;
                  &lt;option value="Indonesia"&gt;Indonesia&lt;/option&gt;&lt;option value="Iran"&gt;Iran&lt;/option&gt;&lt;option value="Iraq"&gt;Iraq&lt;/option&gt;
                  &lt;option value="Ireland {Republic}"&gt;Ireland {Republic}&lt;/option&gt;&lt;option value="Israel"&gt;Israel&lt;/option&gt;&lt;option value="Italy"&gt;Italy&lt;/option&gt;
                  &lt;option value="Ivory Coast"&gt;Ivory Coast&lt;/option&gt;&lt;option value="Jamaica"&gt;Jamaica&lt;/option&gt;&lt;option value="Japan"&gt;Japan&lt;/option&gt;
                  &lt;option value="Jordan"&gt;Jordan&lt;/option&gt;&lt;option value="Kazakhstan"&gt;Kazakhstan&lt;/option&gt;&lt;option value="Kenya"&gt;Kenya&lt;/option&gt;
                  &lt;option value="Kiribati"&gt;Kiribati&lt;/option&gt;&lt;option value="Korea North"&gt;Korea North&lt;/option&gt;&lt;option value="Korea South"&gt;Korea South&lt;/option&gt;
                  &lt;option value="Kosovo"&gt;Kosovo&lt;/option&gt;&lt;option value="Kuwait"&gt;Kuwait&lt;/option&gt;&lt;option value="Kyrgyzstan"&gt;Kyrgyzstan&lt;/option&gt;
                  &lt;option value="Laos"&gt;Laos&lt;/option&gt;&lt;option value="Latvia"&gt;Latvia&lt;/option&gt;&lt;option value="Lebanon"&gt;Lebanon&lt;/option&gt;
                  &lt;option value="Lesotho"&gt;Lesotho&lt;/option&gt;&lt;option value="Liberia"&gt;Liberia&lt;/option&gt;&lt;option value="Libya"&gt;Libya&lt;/option&gt;
                  &lt;option value="Liechtenstein"&gt;Liechtenstein&lt;/option&gt;&lt;option value="Lithuania"&gt;Lithuania&lt;/option&gt;&lt;option value="Luxembourg"&gt;Luxembourg&lt;/option&gt;
                  &lt;option value="Macedonia"&gt;Macedonia&lt;/option&gt;&lt;option value="Madagascar"&gt;Madagascar&lt;/option&gt;&lt;option value="Malawi"&gt;Malawi&lt;/option&gt;
                  &lt;option value="Malaysia"&gt;Malaysia&lt;/option&gt;&lt;option value="Maldives"&gt;Maldives&lt;/option&gt;&lt;option value="Mali"&gt;Mali&lt;/option&gt;
                  &lt;option value="Malta"&gt;Malta&lt;/option&gt;&lt;option value="Marshall Islands"&gt;Marshall Islands&lt;/option&gt;&lt;option value="Mauritania"&gt;Mauritania&lt;/option&gt;
                  &lt;option value="Mauritius"&gt;Mauritius&lt;/option&gt;&lt;option value="Mexico"&gt;Mexico&lt;/option&gt;&lt;option value="Micronesia"&gt;Micronesia&lt;/option&gt;
                  &lt;option value="Moldova"&gt;Moldova&lt;/option&gt;&lt;option value="Monaco"&gt;Monaco&lt;/option&gt;&lt;option value="Mongolia"&gt;Mongolia&lt;/option&gt;
                  &lt;option value="Montenegro"&gt;Montenegro&lt;/option&gt;&lt;option value="Morocco"&gt;Morocco&lt;/option&gt;&lt;option value="Mozambique"&gt;Mozambique&lt;/option&gt;
                  &lt;option value="Myanmar, {Burma}"&gt;Myanmar, {Burma}&lt;/option&gt;&lt;option value="Namibia"&gt;Namibia&lt;/option&gt;&lt;option value="Nauru"&gt;Nauru&lt;/option&gt;
                  &lt;option value="Nepal"&gt;Nepal&lt;/option&gt;&lt;option value="Netherlands"&gt;Netherlands&lt;/option&gt;&lt;option value="New Zealand"&gt;New Zealand&lt;/option&gt;
                  &lt;option value="Nicaragua"&gt;Nicaragua&lt;/option&gt;&lt;option value="Niger"&gt;Niger&lt;/option&gt;&lt;option value="Nigeria"&gt;Nigeria&lt;/option&gt;
                  &lt;option value="Norway"&gt;Norway&lt;/option&gt;&lt;option value="Oman"&gt;Oman&lt;/option&gt;&lt;option value="Pakistan"&gt;Pakistan&lt;/option&gt;
                  &lt;option value="Palau"&gt;Palau&lt;/option&gt;&lt;option value="Panama"&gt;Panama&lt;/option&gt;&lt;option value="Papua New Guinea"&gt;Papua New Guinea&lt;/option&gt;
                  &lt;option value="Paraguay"&gt;Paraguay&lt;/option&gt;&lt;option value="Peru"&gt;Peru&lt;/option&gt;&lt;option value="Philippines"&gt;Philippines&lt;/option&gt;
                  &lt;option value="Poland"&gt;Poland&lt;/option&gt;&lt;option value="Portugal"&gt;Portugal&lt;/option&gt;&lt;option value="Qatar"&gt;Qatar&lt;/option&gt;
                  &lt;option value="Romania"&gt;Romania&lt;/option&gt;&lt;option value="Russian Federation"&gt;Russian Federation&lt;/option&gt;&lt;option value="Rwanda"&gt;Rwanda&lt;/option&gt;
                  &lt;option value="St Kitts &amp; Nevis"&gt;St Kitts &amp; Nevis&lt;/option&gt;&lt;option value="St Lucia"&gt;St Lucia&lt;/option&gt;&lt;option value="Saint Vincent &amp; the Grenadines"&gt;Saint Vincent &amp; the Grenadines&lt;/option&gt;
                  &lt;option value="Samoa"&gt;Samoa&lt;/option&gt;&lt;option value="San Marino"&gt;San Marino&lt;/option&gt;&lt;option value="Sao Tome &amp; Principe"&gt;Sao Tome &amp; Principe&lt;/option&gt;
                  &lt;option value="Saudi Arabia"&gt;Saudi Arabia&lt;/option&gt;&lt;option value="Senegal"&gt;Senegal&lt;/option&gt;&lt;option value="Serbia"&gt;Serbia&lt;/option&gt;
                  &lt;option value="Seychelles"&gt;Seychelles&lt;/option&gt;&lt;option value="Sierra Leone"&gt;Sierra Leone&lt;/option&gt;&lt;option value="Singapore"&gt;Singapore&lt;/option&gt;
                  &lt;option value="Slovakia"&gt;Slovakia&lt;/option&gt;&lt;option value="Slovenia"&gt;Slovenia&lt;/option&gt;&lt;option value="Solomon Islands"&gt;Solomon Islands&lt;/option&gt;
                  &lt;option value="Somalia"&gt;Somalia&lt;/option&gt;&lt;option value="South Africa"&gt;South Africa&lt;/option&gt;&lt;option value="South Sudan"&gt;South Sudan&lt;/option&gt;
                  &lt;option value="Spain"&gt;Spain&lt;/option&gt;&lt;option value="Sri Lanka"&gt;Sri Lanka&lt;/option&gt;&lt;option value="Sudan"&gt;Sudan&lt;/option&gt;
                  &lt;option value="Suriname"&gt;Suriname&lt;/option&gt;&lt;option value="Swaziland"&gt;Swaziland&lt;/option&gt;&lt;option value="Sweden"&gt;Sweden&lt;/option&gt;
                  &lt;option value="Switzerland"&gt;Switzerland&lt;/option&gt;&lt;option value="Syria"&gt;Syria&lt;/option&gt;&lt;option value="Taiwan"&gt;Taiwan&lt;/option&gt;
                  &lt;option value="Tajikistan"&gt;Tajikistan&lt;/option&gt;&lt;option value="Tanzania"&gt;Tanzania&lt;/option&gt;&lt;option value="Thailand"&gt;Thailand&lt;/option&gt;
                  &lt;option value="Togo"&gt;Togo&lt;/option&gt;&lt;option value="Tonga"&gt;Tonga&lt;/option&gt;&lt;option value="Trinidad &amp; Tobago"&gt;Trinidad &amp; Tobago&lt;/option&gt;
                  &lt;option value="Tunisia"&gt;Tunisia&lt;/option&gt;&lt;option value="Turkey"&gt;Turkey&lt;/option&gt;&lt;option value="Turkmenistan"&gt;Turkmenistan&lt;/option&gt;
                  &lt;option value="Tuvalu"&gt;Tuvalu&lt;/option&gt;&lt;option value="Uganda"&gt;Uganda&lt;/option&gt;&lt;option value="Ukraine"&gt;Ukraine&lt;/option&gt;
                  &lt;option value="United Arab Emirates"&gt;United Arab Emirates&lt;/option&gt;&lt;option value="United Kingdom"&gt;United Kingdom&lt;/option&gt;&lt;option value="United States"&gt;United States&lt;/option&gt;
                  &lt;option value="Uruguay"&gt;Uruguay&lt;/option&gt;&lt;option value="Uzbekistan"&gt;Uzbekistan&lt;/option&gt;&lt;option value="Vanuatu"&gt;Vanuatu&lt;/option&gt;
                  &lt;option value="Vatican City"&gt;Vatican City&lt;/option&gt;&lt;option value="Venezuela"&gt;Venezuela&lt;/option&gt;&lt;option value="Vietnam"&gt;Vietnam&lt;/option&gt;
                  &lt;option value="Yemen"&gt;Yemen&lt;/option&gt;&lt;option value="Zambia"&gt;Zambia&lt;/option&gt;&lt;option value="Zimbabwe"&gt;Zimbabwe&lt;/option&gt;
                &lt;/select&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Citizenship:* &lt;br/&gt;&lt;select name="citizenship"  id="citixen" default required&gt;
                                &lt;option value=""&gt;Choose Here&lt;/option&gt;
                                &lt;option value="USCitizen"&gt;US Citizen&lt;/option&gt;
                                &lt;option value="greencard"&gt;Green Card&lt;/option&gt;
                                &lt;option value="H1B"&gt;H1B&lt;/option&gt;
                                &lt;option value="EAD"&gt;EAD&lt;/option&gt;
                                &lt;option value="Other"&gt;Other&lt;/option&gt;
                            &lt;/select&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br/&gt;&lt;br/&gt;&lt;button type="submit"&gt;Submit&lt;/button&gt;
  
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="column right" id="right"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>