Emptying the innerHTML of an element empties the whole page
Question
I have this test program that I wrote just to take confidence with Javascript. For now I am interested only about the client side script, so I don't need PHP, I just wanted to write a script able to read the values of some text fields and to do something with it.
I have defined a class constructor Person , able to hold the properties name , surname and age . With a function getDescription() able to return the full description of the person. I start with an array of a single element, when the user presses the button I read the text field values, possibly create a Person object (if fields are typed correctly), and add the person description using the innerHTML property of the element with the id "people". This is the code:
<!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>
The problem is that when I click on the button, the new person gets added but the buttons disappear. This is before pressing the button:
And after:
So why when I set the inner HTML of "people" to an empty string also the other stuff disappear?
2 answers
solution1
2 ACCPTED 2013-10-08 13:15:45
You should not use function document.write within function showPeople(), which write HTML content in current document of your whole web page.
You also need to add a new element to your HTML doc with id people because it doesn't exist:
<div id="people"></div>
Please use a string to append what you need and then set the innerHTML of an element.
An updated version of function 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;
}
solution2
-1 2013-10-08 13:22:30
另外， <p id="People"> <p> your people </p> </p>无效，您最好将外部p设为div。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.