清空元素的innerHTML将清空整个页面
[英]Emptying the innerHTML of an element empties the whole page
问题描述
我有编写这个测试程序只是为了对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>
问题是，当我单击按钮时，会添加新人员，但按钮会消失。 这是在按下按钮之前：
之后：
那么，为什么当我将“ people”的内部HTML设置为一个空字符串时，其他东西也消失了？
2 个解决方案
解决方案1
2 已采纳 2013-10-08 13:15:45
您不应在函数showPeople（）中使用函数document.write ，该函数会在整个网页的当前文档中写入HTML内容。
您还需要添加一个ID为id的people到HTML文档中，因为它不存在：
<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;
}
解决方案2
-1 2013-10-08 13:22:30
另外， <p id="People"> <p> your people </p> </p>无效，您最好将外部p设为div。
替换整个元素而不是innerHTML？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.