CODEWITHSUNDEEP
javascripttypeerror
user5491517
user5491517

Reputation: 49

Uncaught TypeError: Cannot set property 'innerHTML'

I'm sorry if this is a repeat post, I haven't been able to locate anything covering my particular problem. So I'm using Javascript to validate a form to check for empty fields, and I'm using method="get" to push the data to another html page. On that page the data is interpretted from the query string and displayed. This is for a class and I keep getting "Uncaught TypeError: Cannot set property 'innerHTML' of null". I have provided all of my code below. I would really appreciate any help figuring out what is happening. Cheers.

The errors I am receiving..

<--Form Submit.htm-->


<!DOCTYPE html>
<html>
  <head>
    <title>jpratt_Lab04-Form Validation</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script>
    // Function gets data submitted on first page and displays it on the second page
    function getData() {
    // Set formData to the query string passed in by the page URL
    var formData = location.search;

    // Extract the characters from formData where 0 is the first character
    formData = formData.substring(1, formData.length);

    // Replace all characters in formData as "+" => " " AND "=" => ": " AND "%40" => "@"
    while (formData.indexOf("+") != -1 || formData.indexOf("=") != -1) {
    formData = formData.replace("+", " ");
    formData = formData.replace("=", ": ");

    // Firefox and Chrome use %40 for the "@" char in email address
    formData = formData.replace("%40", "@");
    }

    // Split the string formData into an array, "&" is the delimiter used to split string
    var interestList = "Interests: ";
    var formArray = formData.split("&");

    // Write array values to id's on the second page
    document.getElementById("user").innerHTML = formArray[0];
    document.getElementById("email").innerHTML = formArray[1];
    document.getElementById("password").innerHTML = formArray[2];
    document.getElementById("passwordConfirm").innerHTML = formArray[3];
    document.getElementById("specialOffers").innerHTML = formArray[4];

    // Create a string “interestList” of reported interests
    for (var i = 5; i < formArray.length; i++) {
    interestList += formArray[i].substring(11) + ", ";
    }
    document.getElementById("interests").innerHTML = interestList;
    }
    </script>



  </head>
  <body>

    <header>
      <h1>Website Registration Form</h1>
    </header>

    <article>

      <h2>Your Submitted Information:</h2>
      <p id="user"><script>getData();</script></p>
      <p id="email"><script>getData();</script></p>
      <p id="password"><script>getData();</script></p>
      <p id="passwordConfirm"><script>getData();</script></p>
      <p id="specialOffers"><script>getData();</script></p>
      <p id="interests"><script>getData();</script></p>

    </article>

  </body>
</html>


<--index.htm-->

    <!DOCTYPE html>
<html>
  <head>
    <title>jpratt_Lab04-Form Validation</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script>

      function validate() {

        var user = document.forms['form']['user'].value;
        var email = document.forms['form']['email'].value;
        var pass = document.forms['form']['pass'].value;
        var confirmPass = document.forms['form']['confirmPass'].value;
        var specialOffers = document.forms['form']['specialOffers'].value;
        var errors = false;
        var userError = document.getElementById('userWarning');
        var emailError = document.getElementById('emailWarning');
        var passError = document.getElementById('passWarning');
        var soError = document.getElementById('soError');

        try {

          if (user == '' || user == 'Please enter your name..') throw userError.innerHTML = 'Your name is required.';

        }

        catch (err) {

          var errors = true;
          err;

        }

        try {

          if (email == '' || email == 'Please enter your email..') throw emailError.innerHTML = 'Your email is required.';

        }

        catch (err) {

          var errors = true;
          err;

        }

        try {

          if (pass == '' || confirmPass == '') throw passError.innerHTML = 'Password is required.';
          if (pass != confirmPass) throw passError.innerHTML = 'Passwords do not match.';

        }

        catch (err) {

          var errors = true;
          err;

        }

        try {

          if (specialOffers == '') throw soError.innerHTML = 'You must select yes or no.';

        }

        catch (err) {

          var errors = true;
          err;

        }

      //  var chkd = document.getElementByID['form']['interests'].value;
      //  alert(chkd);

        if (errors == true) {


          return false;

        }

        else {



        }

      }

    </script>
  </head>
  <body>

    <header>
      <h1>Website Registration Form</h1>
    </header>

    <article>
      <form name="form" method="get" enctype="application/x-www-form-urlencoded" action="form-submit.htm" onsubmit="return validate()">

        <h2>Personal Information:</h2>
        <p>
          <label name="user">Name:</label>
          <input type="text" name="name" id="user" value="Please enter your name.." />
        </p>

        <p id="userWarning" class="alert"></p>

        <p>
          <label name="email">Email:</label>
          <input type="text" name="email" id="email" value="Please enter your email.." />
        </p>

        <p id="emailWarning" class="alert"></p>

        <h2>Security Information:</h2>
        <p>
          <label name="pass">Password:</label>
          <input type="password" name="pass" id="pass" />
        </p>

        <p>
          <label name="confirmPass">Confirm Password:</label>
          <input type="password" name="confirmPass" id="confirmPass" />
        </p>

        <p id="passWarning" class="alert"></p>

        <h2>Security Information:</h2>
        <p class="alignleft">
          <label name="specialOffers">E-mail Specail Offers:</label>
          <input type="radio" name="specialOffers" id="specialOffers" value="true" />Yes
          <input type="radio" name="specialOffers" id="specialOffers" value="false" />No
        </p>

        <p id="soError" class="alert"></p>

        <p class="alignleft">
          <label name="interests">Interests:</label><br>
          <input type="checkbox" name="interests" id="entertaiment" value="entertainment" />Entertainment<br>
          <input type="checkbox" name="interests" id="interests" value="business" />Business<br>
          <input type="checkbox" name="interests" id="interests" value="music" />Music<br>
          <input type="checkbox" name="interests" id="interests" value="shopping" />Shopping<br>
          <input type="checkbox" name="interests" id="interests" value="travel" />Travel
        </p>

        <p id="interestError" class="alert"></p>

        <p class="buttons">
          <input type="submit" />
          <input type="reset" value="Reset"/>
        </p>

      </form>
    </article>

    <footer></footer>

  </body>
</html>

Upvotes: 3

Views: 1450

Answers (1)

MacK
MacK

Reputation: 2181

Your problem is down here:

<p id="user"><script>getData();</script></p>
<p id="email"><script>getData();</script></p>
<p id="password"><script>getData();</script></p>
<p id="passwordConfirm"><script>getData();</script></p>
<p id="specialOffers"><script>getData();</script></p>
<p id="interests"><script>getData();</script></p>

You are calling the function getData() for 6 times and you need to call it only once since in the function you have already this:

// Write array values to id's on the second page
document.getElementById("user").innerHTML = formArray[0];
document.getElementById("email").innerHTML = formArray[1];
document.getElementById("password").innerHTML = formArray[2];
document.getElementById("passwordConfirm").innerHTML = formArray[3];
document.getElementById("specialOffers").innerHTML = formArray[4];

The DOM parses from top-down so the browser reads your #user paragraph then it stops to launch the getData() function. Your function gets to execute document.getElementById("user") and all it's fine, then it goes next to execute document.getElementById("email") and it throws an error simply because your browser is still stuck at the #user paragraph and it didn't parsed the #email paragraph yet.

The solution to this is to remove <script>getData();</script> from all the tags and then place a single call at the end of your HTML document, just before the closing body tag.

In a nutshell this is one of the main reasons why libraries are generally loaded on the head tag while all the custom code, including DOM manipulation is usually loaded at last.

Upvotes: 2

Related Questions