HTML <input>按钮消失点击

我正在阅读使用JavaScript的XML文件，这部分工作，因为我正在获取数据。下面是XML文件：HTML <input>按钮消失点击

<bookstore> 
    <book category="romance"> 
     <title lang="en">Everyday Italian</title> 
     <author>Giada</author> 
     <year>2005</year> 
     <price>30,00</price> 
    </book> 
    <book category="cooking"> 
     <title lang="en">Cook Book</title> 
     <author>Manado</author> 
     <year>2012</year> 
     <price>44,00</price> 
    </book> 
    <book category="drama"> 
     <title lang="en">Intrigue</title> 
     <author>L'amion</author> 
     <year>2002</year> 
     <price>29,99</price> 
    </book>  
</bookstore>

现在我使用JavaScript来显示表中的数据。另外，我添加了两个<input>按钮，每个按钮都有一个onclick属性来调用特定的功能。一个按钮调用change()，其他调用remove()。

下面是HTML页面和JavaScript代码：

<html> 

<head> 
    <title>Index</title> 
    <script type="text/javascript"> 

    function loadXMLDoc(dname) { 
     if(window.XMLHttpRequest) { 
      xhttp = new XMLHttpRequest(); 
     } else { // for IE 5/6 
      xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xhttp.open("GET", dname, false); 
     xhttp.send(); 
     return xhttp.responseXML; 
    } 

    // function to print all book titles 
    function printTitles() { 
     var xmlDoc = loadXMLDoc('bookstore.xml'); 
     var elements = xmlDoc.getElementsByTagName('title') 
     document.write('<table border="1"><tr><th>Title</th></tr>'); 
     for(i = 0; i < elements.length; i++) { 
      document.write("<tr>"); 
      document.write(
       "<td>" + elements[i].childNodes[0].nodeValue + "</td>"); 
      document.write("</tr>") 
     } 
     document.write("</table>"); 
    } 

    // function to change the first book title 
    function change(text) { 
     var xmlDoc = loadXMLDoc('bookstore.xml'); 
     var elements = xmlDoc.getElementsByTagName('title'); 
     var title = elements[0].childNodes[0]; 
     title.nodeValue = text; 
     printTitles(elements); 
    } 

    // function to remove the first book 
    function remove(node) { 
     var xmlDoc = loadXMLDoc('bookstore.xml'); 
     var rem = xmlDoc.getElementsByTagName(node)[0]; 
     xmlDoc.documentElement.removeChild(rem); 
     printTitles(elements); 
    } 

    printTitles(); 

    </script> 
</head> 

<body> 
    <input type="button" value="change" onclick="change('WORKS')"/> 
    <input type="button" value="remove" onclick="remove('book')"/> 
</body> 

</html>

当我点击change按钮，这两个按钮消失。当我点击remove按钮时，只有remove按钮消失。

这里是我的网页上的所有3种状态（我不能上传照片，因为我没有代表）：

http://postimg.org/image/5lrwf7rcz/

现在，我已经搜索答案，this question或this question答案没有帮助我。我找不到缺失的结束标记并返回false不会改变任何内容。

更新：我跑在Chrome调试器，当我点击remove按钮时，remove()功能不会被调用，但是当我点击change按钮时，change()功能不会被调用。

来源

2014-09-25 Bug Feature

那就是'document.write'呢，它覆盖'document'！ – adeneo 2014-09-25 17:38:51

所以我想在每次按下按钮时重新创建按钮，如果我希望事情能够按照这种方式工作？ – 2014-09-25 17:40:07

最好不要使用'document.write' – 2014-09-25 17:40:45

我找到了一个解决方案，所以我尽管可能会在这里发布它，以防有人需要它。

首先，我在printTitles()的document.write("</tr>")内丢失了一个分号，但这不是程序无法工作的主要原因。

服用了@ Teemu关于功能createElement，createTextNode,appendChild的建议并回顾了其他有用的评论之后，我更改了很多代码。我使用了上述功能，并添加了window.onload检查以确保我可以在页面加载后编辑主体。

XML文件保持不变，这里是我的HTML文件中使用JavaScript：

<html> 
<head> 
    <title>Index</title> 
    <script type="text/javascript"> 

    window.onload = function() { 

     // function that loads an XML file through an HTTP request 
     function loadXMLDoc(dname) { 
      if(window.XMLHttpRequest) { 
       xhttp = new XMLHttpRequest(); 
      } else { // for IE 5/6 
       xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 

      xhttp.open("GET", dname, false); 
      xhttp.send(); 
      return xhttp.responseXML; 
     } 

     var xmlDoc = loadXMLDoc('bookstore.xml'); // holds the loaded XML file 

     // builds a string from xml elements containing the HTML code for the body 
     function buildBody(elements) { 
      var body = '<table border="1"><tr><th>Title</th></tr>'; 
      for(i = 0; i < elements.length; i++) { 
       body += "<tr>"; 
       body += 
        "<td id='" + i +"'>" + elements[i].childNodes[0].nodeValue + "</td>"; 
       body += "</tr>"; 
      } 
      body += "</table>"; 
      return body; 
     } 

     // prints the input buttons 
     function printInputs(elements) { 
      document.body.innerHTML = buildBody(elements); 

      // button change 
      var inputChange = document.createElement('input'); 
      inputChange.setAttribute('type', 'button'); 
      inputChange.setAttribute('value', 'Change first title'); 
      inputChange.onclick = function change() { // on click function for the button 
        document.getElementById(0).innerHTML = 'WORKS'; 
      } 
      document.body.appendChild(inputChange); // add button to the body 

      // button remove 
      var inputRemove = document.createElement('input'); 
      inputRemove.setAttribute('type', 'button'); 
      inputRemove.setAttribute('value', 'Remove first title'); 
      inputRemove.onclick = function remove() { // on click function for the button 
        document.getElementById(0).innerHTML = ''; 
      } 
      document.body.appendChild(inputRemove); // add button to the body 
     } 

     function printTitles() { 
       var xmlDoc = loadXMLDoc('bookstore.xml'); 
       var elements = xmlDoc.getElementsByTagName('title'); 
       printInputs(elements); 
     } 

     printTitles(); 
    } 


    </script> 
</head> 

<body> 

</body> 

</html>

来源

2014-09-26 16:35:59

HTML <input>按钮消失点击

回答

相关问题