title: TypeError: Cannot read property 'classList' of null
body: <p>I am getting an error </p>
  
  <pre><code>TypeError: Cannot read property 'classList' of null
  </code></pre>
  
  <p>I am not really sure what am I doing wrong in manipulating DOM element for each form field. My form field has an stated name and ID of form and each input field has a name and id of the field as well. But I am still getting an error.</p>
  
  <p>What am i doing wrong?</p>
  
  <p>My script:</p>
  
  <pre><code>document.querySelector("#form").addEventListener("submit", function(e){
  //create variable for contact form url
  var formURL = 'melonForm.php';
  //prevent default submission
  event.preventDefault();
  //define form fields
  var melonForm = {
      'firstName'              : document.querySelector('input[name=firstName]').value,
      'lastName'             : document.querySelector('input[name=lastName]').value,
      'companyName'       : document.querySelector('input[name=companyName]').value,
      'companyAddress'       : document.querySelector('input[name=companyAddress]').value,
      'city'       : document.querySelector('input[name=city]').value,
      'state'       : document.querySelector('select[name=state]').value,
      'zipcode'       : document.querySelector('input[name=zipcode]').value,
      'emailAddress'       : document.querySelector('input[name=emailAddress]').value,
      'phoneNumber'       : document.querySelector('input[name=phoneNumber]').value,
  }
  
  //define request variable
  var formRequest = new Request(formURL, {
      method: 'POST', 
      body: melonForm, 
      headers: new Headers()
  });
  
  //fetch
  fetch(formRequest)
  .then(function(formResponse) {
      return formResponse.json();
    })
  .then(function(data) {
      //handle server responses
      if ( ! data.success) {
      //handle error messages
          //handle error message for firstName
          console.log(data);
          if (data.errors.firstName) {
              document.getElementById("firstName").classList.add("has-error");
              document.getElementById("firstName").appendChild('&lt;div class="help-block"&gt;' + data.errors.firstName + '&lt;/div&gt;');
          }
          //handle errors for lastName
          if (data.errors.lastName) {
              document.getElementById("lastName").classList.add("has-error");
              document.getElementById("lastName").appendChild('&lt;div class="help-block"&gt;' + data.errors.lastName + '&lt;/div&gt;');
          }
          //handle errors for companyName
          if (data.errors.companyName) {
              document.getElementById("companyName").classList.add("has-error");
              document.getElementById("companyName").appendChild('&lt;div class="help-block"&gt;' + data.errors.companyName + '&lt;/div&gt;');
          }
          //handle errors for companyAddress
          if (data.errors.companyAddress) {
              document.getElementById("companyAddress").classList.add("has-error");
              document.getElementById("companyAddress").appendChild('&lt;div class="help-block"&gt;' + data.errors.companyAddress + '&lt;/div&gt;');
          }
          //handle errors for city
          if (data.errors.city) {
              document.getElementById("city").classList.add("has-error");
              document.getElementById("city").appendChild('&lt;div class="help-block"&gt;' + data.errors.city + '&lt;/div&gt;');
          }
          //handle errors for state
          if (data.errors.state) {
              document.getElementById("state").classList.add("has-error");
              document.getElementById("statea").appendChild('&lt;div class="help-block"&gt;' + data.errors.state + '&lt;/div&gt;');
          }
          //handle errors for zipcode
          if (data.errors.zipcode) {
              document.getElementById("zipcode").classList.add("has-error");
              document.getElementById("zipcode").appendChild('&lt;div class="help-block"&gt;' + data.errors.zipcode + '&lt;/div&gt;');
          }
          //handle errors for emailAddress
          if (data.errors.emailAddress) {
              document.getElementById("emailAddress").classList.add("has-error");
              document.getElementById("emailAddress").appendChild('&lt;div class="help-block"&gt;' + data.errors.emailAddress + '&lt;/div&gt;');
          }
          //handle errors for phoneNumber
          if (data.errors.phoneNumber) {
              document.getElementById("phoneNumber").classList.add("has-error");
              document.getElementById("phoneNumber").appendChild('&lt;div class="help-block"&gt;' + data.errors.phoneNumber + '&lt;/div&gt;');
          }
          // handle errors for captcha ---------------
          if (data.errors.captcha) {
              swal({
                  title: "Error!",
                  text: data.errors.captcha,
                  icon: "error",
              });
          }
          // handle errors for phpmailer ---------------
          if (data.message) {
              swal({
                  title: "Error!",
                  text: data.message,
                  icon: "error",
                  });
          }   
      else {
      //handle success messages
          swal({
              title: "Success!",
              text: data.message,
              icon: "success",
              });
      document.getElementById("form").reset();    
      }
  }
  });
  })
  </code></pre>
  
  <p>I know that the field firstName does exist in the html but not sure why the javascript is not able to read the element.</p>
  
  <p><strong>ADDED HTML:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Melon Form&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt; &lt;!-- load bootstrap via CDN --&gt;
  
      &lt;script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="col-sm-6 col-sm-offset-3"&gt;
  
      &lt;h1&gt;Contact Form&lt;/h1&gt;
  
      &lt;!-- OUR FORM --&gt;
      &lt;form name="form" id="form" action="melonForm.php" method="POST"&gt;
  
          &lt;!-- FIRST NAME --&gt;
          &lt;div id="firstName-group" class="form-group"&gt;
              &lt;label for="firstName"&gt;First Name:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="firstName" placeholder="Henry Pym"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;!-- LAST NAME --&gt;
          &lt;div id="lastName-group" class="form-group"&gt;
              &lt;label for="lastName"&gt;Last Name:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="lastName" placeholder="Henry Pym"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;!-- COMPANY NAME --&gt;
          &lt;div id="companyName-group" class="form-group"&gt;
              &lt;label for="companyName"&gt;Company Name:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="companyName" placeholder="Henry Pym"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;!-- COMPANY ADDRESS --&gt;
          &lt;div id="companyAddress-group" class="form-group"&gt;
              &lt;label for="companyAddress"&gt;Company Address:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="companyAddress" placeholder="Henry Pym"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;!-- CITY --&gt;
          &lt;div id="city-group" class="form-group"&gt;
              &lt;label for="city"&gt;City:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="city" id="city" placeholder="Henry Pym"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;div id="state-group" class="form-group"&gt;
          &lt;label for="state"&gt;State&lt;/label&gt;
          &lt;select id="state" name="state" class="form-control"&gt;
              &lt;option value="" selected&gt;Choose...&lt;/option&gt;
              &lt;option value="AL"&gt;Alabama&lt;/option&gt;
              &lt;option value="AK"&gt;Alaska&lt;/option&gt;
              &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
              &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
              &lt;option value="CA"&gt;California&lt;/option&gt;
              &lt;option value="CO"&gt;Colorado&lt;/option&gt;
              &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
              &lt;option value="DE"&gt;Delaware&lt;/option&gt;
              &lt;option value="DC"&gt;District Of Columbia&lt;/option&gt;
              &lt;option value="FL"&gt;Florida&lt;/option&gt;
              &lt;option value="GA"&gt;Georgia&lt;/option&gt;
              &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
              &lt;option value="ID"&gt;Idaho&lt;/option&gt;
              &lt;option value="IL"&gt;Illinois&lt;/option&gt;
              &lt;option value="IN"&gt;Indiana&lt;/option&gt;
              &lt;option value="IA"&gt;Iowa&lt;/option&gt;
              &lt;option value="KS"&gt;Kansas&lt;/option&gt;
              &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
              &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
              &lt;option value="ME"&gt;Maine&lt;/option&gt;
              &lt;option value="MD"&gt;Maryland&lt;/option&gt;
              &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
              &lt;option value="MI"&gt;Michigan&lt;/option&gt;
              &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
              &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
              &lt;option value="MO"&gt;Missouri&lt;/option&gt;
              &lt;option value="MT"&gt;Montana&lt;/option&gt;
              &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
              &lt;option value="NV"&gt;Nevada&lt;/option&gt;
              &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
              &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
              &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
              &lt;option value="NY"&gt;New York&lt;/option&gt;
              &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
              &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
              &lt;option value="OH"&gt;Ohio&lt;/option&gt;
              &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
              &lt;option value="OR"&gt;Oregon&lt;/option&gt;
              &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
              &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
              &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
              &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
              &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
              &lt;option value="TX"&gt;Texas&lt;/option&gt;
              &lt;option value="UT"&gt;Utah&lt;/option&gt;
              &lt;option value="VT"&gt;Vermont&lt;/option&gt;
              &lt;option value="VA"&gt;Virginia&lt;/option&gt;
              &lt;option value="WA"&gt;Washington&lt;/option&gt;
              &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
              &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
              &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;!-- ZIPCODE --&gt;
          &lt;div id="zipcode-group" class="form-group"&gt;
              &lt;label for="zipcode"&gt;Zipcode:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="zipcode" id="zipcode" placeholder="12345"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;  
  
          &lt;!-- EMAIL ADDRESS --&gt;
          &lt;div id="emailAddress-group" class="form-group"&gt;
              &lt;label for="emailAddress"&gt;Email Address:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="emailAddress" placeholder="rudd@avengers.com"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;!-- PHONE NUMBER --&gt;
          &lt;div id="phoneNumber-group" class="form-group"&gt;
              &lt;label for="phoneNumber"&gt;Phone Number:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="phoneNumber" id="phoneNumber" placeholder="12345"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;  
  
          &lt;!-- MESSAGE --&gt;
          &lt;div id="message-group" class="form-group"&gt;
              &lt;label for="message"&gt;Message:&lt;/label&gt;
              &lt;input type="text" class="form-control" name="message" placeholder="Ant Man"&gt;
              &lt;!-- errors will go here --&gt;
          &lt;/div&gt;
  
          &lt;!-- GOOGLE RECAPTCHA --&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="g-recaptcha" data-sitekey="SECRET_KEY"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;button type="submit" class="btn btn-success"&gt;Submit &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;&lt;/button&gt;
  
      &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;script src="melonForm.js" defer&gt;&lt;/script&gt; &lt;!-- load our javascript file --&gt;
  &lt;/body&gt;
  &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>