Question

我试图使用对象，所以很多人会填充他们的信息，它会保存数组中的每个对象。但是，每次我尝试更改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>

Answer 1

我希望你不要在我的代码中移动一些东西，但这应该更像你想要实现的东西。你已经有了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>

未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39; null：javascript

1 个答案: