HTML<输入>按钮在单击时消失

HTML <input> button(s) disappear on click

本文关键字：单击 消失 gt lt 输入 HTML 按钮      更新时间：2023-09-26

我正在使用JavaScript读取一个XML文件，这一部分在获取数据的过程中发挥作用。这是XML文件：

<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/

现在，我已经搜索了答案，但这个问题或这个问题的答案对我没有帮助。我找不到丢失的结束标记，返回false不会改变任何事情。

更新：我在Chrome上运行了调试器，当我单击remove按钮时，remove()函数永远不会被调用，但当我单击change按钮时，会调用change()函数。

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

首先，我在document.write("</tr>")的printTitles()中缺少了一个分号，但这并不是程序不工作的主要原因。

在听取了@Teemu关于函数createElement、createTextNode、appendChild的建议并查看了其他有用的评论后，我对代码进行了大量更改。我使用了上面提到的函数，并添加了window.onload检查，以确保在页面加载后可以编辑正文。

XML文件保持不变，这是我的JavaScript HTML文件：

<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>
相关文章：