0

我有这个测试程序，我编写它只是为了对 Javascript 有信心。现在我只对客户端脚本感兴趣，所以我不需要 PHP，我只想编写一个能够读取某些文本字段的值并对其进行处理的脚本。

我已经定义了一个类构造函数Person，能够保存属性name，surname并且age。具有getDescription()能够返回人的完整描述的功能。我从单个元素的数组开始，当用户按下按钮时，我读取文本字段值，可能创建一个Person对象（如果字段输入正确），并使用innerHTML带有 id 的元素的属性添加人员描述“人们”。这是代码： 

<!DOCTYPE html>
<html>
    <head>
        <title> People </title>
    </head>
    <body>
        <h1 align="center"> People </h1>
        <p id="input">
            Name <input type="text" name="name" id="name" />
            Surname <input type="text" name="surname" id="surname" />
            Age <input type="text" name="age" id="age" />
            <input type="button" onClick="insert()" value="Insert new Person"/>
        </p>
        <script type="text/javascript">
            // Classe persona:
            function Person(name,surname, age) {
                this.name= name;
                this.surname= surname;
                this.age= age;
            }
            Person.prototype.getDesciption= function () {
                return "Name: " + this.name + " surname: " + this.surname + " age: " + this.age; 
            }

            // Inserimento persona:
            function insert() {
                var name= document.getElementById("name").value;
                var surname= document.getElementById("surname").value;
                var age= document.getElementById("age").value;
                if(name.length > 0 && surname.length>0 && age.length>0)
                {
                    age= parseInt(age);
                    if(isNaN(age))
                    {
                        alert("Incorrect age");
                    }
                    else 
                    {
                        var person= new Person(name,surname,age);
                        people.push(person);
                        document.getElementById("people").innerHTML="";
                        showPeople();
                    }
                }
                else
                {
                    alert("Do not insert empty fields");
                }
            }

            // Mostra le persone:
            function showPeople() {
                document.write("<p id='people'>");
                for(var i=0; i<people.length; i++) {
                    document.write("<p>");
                    document.write(people[i].getDesciption());
                    document.write("</p>");
                }
                document.write("</p>");
            }

            var people= [ new Person("Mario","Bros",25) ];
            showPeople();
        </script>
    </body>
</html>

问题是当我点击按钮时，新人被添加但按钮消失了。这是在按下按钮之前：

在此处输入图像描述

之后：

在此处输入图像描述

那么为什么当我将“人”的内部 HTML 设置为空字符串时，其他内容也会消失？

4

2 回答 2

2

您不应该document.write在函数 showPeople() 中使用函数，该函数会在整个网页的当前文档中写入 HTML 内容。

您还需要使用 id 向 HTML 文档添加一个新元素，people因为它不存在：

<div id="people"></div>

请使用字符串附加您需要的内容，然后设置元素的 innerHTML。

功能的更新版本showPeople()：

function showPeople(persons) {
    var personDesc = "";
    for(var i=0; i<persons.length; i++) {
        personDesc += "<p>";
        personDesc += people[i].getDesciption();
        personDesc += "</p>";
    }
    document.getElementById('people').innerHTML = personDesc;
}
于 2013-10-08T13:15:45.360 回答
-1

此外，<p id="People"> <p> your people </p> </p>无效，您最好将外部 p 设置为 div。

于 2013-10-08T13:22:30.023 回答