清空元素的innerHTML清空整个页面

我有这个测试程序，我只是为了对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>

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

enter image description here

而经过：

enter image description here

那么，为什么当我“人”的内部HTML设置为空字符串也其他的东西消失了？

来源

2013-10-08 Ramy Al Zuhouri

@adam它在'Insert（）'中生成。 @Ramy，在你调用'getElementById'之后，你正在给DOM *添加'people'。它在你第一次做这件事时不存在。 – CodingIntrigue

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

你还需要一个新的元素添加到您的HTML文档ID为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-08 13:15:45 shawnzhu

或使用例如。 jQuery的$（'＃people'）。val（）是你可以为你的目标环境使用jQuery。 – myselfhimself

-1

而且，<p id="People"> <p> your people </p> </p>是无效的，你最好把外普的是一个div来代替。

来源

2013-10-08 13:22:30 myselfhimself

清空元素的innerHTML清空整个页面

回答

相关问题