我有這個測試程序,我只是爲了對Javascript採取信心。現在我只對客戶端腳本感興趣,所以我不需要PHP,我只是想編寫一個能夠讀取某些文本字段的值並使用它的東西的腳本。清空元素的innerHTML清空整個頁面
我已經定義了一個類構造函數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設置爲空字符串也其他的東西消失了?
@adam它在'Insert()'中生成。 @Ramy,在你調用'getElementById'之後,你正在給DOM *添加'people'。它在你第一次做這件事時不存在。 – CodingIntrigue