Uncaught TypeError: Cannot set property 'innerHTML' of null: javascript

Question

I'm trying to use objects so a number of people will fill their information and it will save every object in an array. But, every time I try to change the text of my HTML elements, I get this error:

Uncaught TypeError: Cannot set property 'innerHTML' of null

here is my code:

<html>
<head>
    <title></title>
</head>
<body>
    <p id="demo">hello there</p>

    <script type="text/javascript">
        var first_name;
        var last_name;
        var age;
        var eye_color;
        var favorite_color;
        var NumOfPeople=0; //note:NumOfPeople is one smalller than the actual num of people
        var persons= new Array();
        var x;
        var y;
        function GetInfo(){
            //document.body.innerHTML = '';
            x= NumOfPeople+1;
            document.getElementById("demo").innerHTML = "Paragraph changed!";
            document.write("<input type= 'text' id= 'FirstName' value='your first name'/>");
            document.write("<input type= 'text' id= 'LastName' value='your last name' />");
            document.write("<input type= 'text' id= 'Age' value='your age'/>");
            document.write("<input type= 'text' id= 'EyeColor' value='your eye color' />");
            document.write("<input type= 'text' id= 'FavoriteColor' value='your favorite color' />");
            document.write("<input type= 'button' id= 'sumbit1' value='sumbit' onclick='submitInfo()' />");
        }
        function person(first, last, age, eye, color){
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eye;
            this. favoriteColor= color;
        };
        function submitInfo(){
            first_name= document.getElementById("FirstName").value;
            last_name=document.getElementById("LastName").value;
            age=document.getElementById("Age").value;
            eye_color=document.getElementById("EyeColor").value;
            favorite_color=document.getElementById("FavoriteColor").value


            persons[NumOfPeople]=new person(first_name, last_name, age,        eye_color, favorite_color);
            NumOfPeople++;
            GetInfo();
        }
        GetInfo();
    </script>

</body>

`document.getElementById("demo")` is coming back `null` (most likely) - do you have an element with that ID? — tymeJV, Apr 04 '16 at 15:43
You CAN NOT use document.write after the page has loaded. That is your problem. — epascarello, Apr 04 '16 at 15:44
you can't use document.write like this. it can be (but shouldn't be) used during the page loading/parsing phase, but any calls afterwards will totally break things. And even if it **COULD** be used, you'd be inserting bad html anyways. `id` attributes **MUST** be unique across the **ENTIRE** document. — Marc B, Apr 04 '16 at 15:44
Related: [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) — Felix Kling, Apr 04 '16 at 15:47
The error occurs at `document.getElementById("demo").innerHTML` when you click on `submit` a second time, because at that time no element with the id `demo` exists anymore. The reason is because `[...]calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.[...]` [MDN Document.write](https://developer.mozilla.org/en/docs/Web/API/Document/write) — t.niese, Apr 04 '16 at 15:52

score 0 · Accepted Answer · answered Apr 04 '16 at 15:54

I hope you don't mind me moving some things around in your code, but this should be something more like what you are trying to achieve. You already have HTML, so why use document.write? And I've also added some code to add the submitted person to a list using document.createElement:

<html>
<head>
    <title></title>
</head>
<body>
    <p id="demo">hello there</p>
    <ul id="list"></ul>

    <form name="person">
      <input type= 'text' id= 'FirstName' value='your first name'/>
      <input type= 'text' id= 'LastName' value='your last name' />
      <input type= 'text' id= 'Age' value='your age'/>
      <input type= 'text' id= 'EyeColor' value='your eye color' />
      <input type= 'text' id= 'FavoriteColor' value='your favorite color' />
      <input type= 'button' id= 'sumbit1' value='sumbit' onclick='submitInfo()' />
  </form>

    <script type="text/javascript">
        var persons = [];
        var x;
        var y;
        var form = document.forms.person;
        var list = document.getElementById("list");

        function GetInfo(){
            document.getElementById("demo").innerHTML = 'Persons added: ' + persons.length;
        }

        function Person(first, last, age, eye, color) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eye;
            this.favoriteColor= color;
        }

        function submitInfo(){
            var first_name = document.getElementById("FirstName").value,
                last_name = document.getElementById("LastName").value,
                age = document.getElementById("Age").value,
                eye_color = document.getElementById("EyeColor").value,
                favorite_color = document.getElementById("FavoriteColor").value,
                person = new Person(first_name, last_name, age, eye_color, favorite_color);

            persons.push(person);

            var li = document.createElement('ul');
            li.innerHTML = person.firstName + ' ' + person.lastName + ' (' + person.age + ')';
            list.appendChild(li);

            form.reset();
            GetInfo();
        }
        GetInfo();
    </script>

</body>

Uncaught TypeError: Cannot set property 'innerHTML' of null: javascript

1 Answers1