HTML <input> 按钮在点击时消失

Posted

技术标签:

【中文标题】HTML <input> 按钮在点击时消失【英文标题】:HTML <input> button(s) disappear on click 【发布时间】:2014-11-20 14:12:30 【问题描述】:

我正在使用 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 在表格中显示该数据。另外,我添加了两个&lt;input&gt; 按钮,每个按钮都有一个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() 函数永远不会被调用但是当我点击 @987654340 @ 按钮,change() 函数会被调用

【问题讨论】:

这就是document.write 所做的,它会覆盖document 所以如果我想让事情以这种方式工作,我想在每次按下按钮时重新创建按钮? 最好不要使用document.write 不,你应该使用document.write !!! 阅读了document.write之后,你应该熟悉DOM操作方法createElementcreateTextNodeappendChild 【参考方案1】:

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

首先,我在document.write("&lt;/tr&gt;")printTitles() 中缺少一个分号,但这并不是程序无法运行的主要原因。

在听取了@Teemu 关于函数createElementcreateTextNodeappendChild 的建议并查看了其他有用的 cmets 后,我对代码进行了很多更改。我使用了上述功能并添加了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>

【讨论】:

以上是关于HTML <input> 按钮在点击时消失的主要内容,如果未能解决你的问题,请参考以下文章

如果一个 HTML 表单有两个 <input type="submit"> 按钮,我怎么知道哪个被点击了?

HTML&CSS基础学习笔记1.26-input重置表单

jquery点击一个事件更换图片,在点击更换回来

点击按钮 input 同步获取焦点

input(file)样式修改及上传文件名显示

去掉input框点击时的默认颜色