未捕获的类型错误:无法设置属性'innerHTML'null的:javascript

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

本文关键字：innerHTML javascript null 属性 类型 错误 设置      更新时间：2023-12-26

我正在尝试使用对象，以便许多人填写他们的信息，并将每个对象保存在数组中。但是，每次我试图更改HTML元素的文本时，我都会收到以下错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null

这是我的代码：

<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>

我希望你不介意我在你的代码中移动一些东西，但这应该更像你正在努力实现的目标。你已经有HTML了，为什么要使用document.write？我还添加了一些代码，使用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>
相关文章：