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 在表格中显示该数据。另外,我添加了两个<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()
函数永远不会被调用但是当我点击 @987654340 @ 按钮,change()
函数会被调用。
【问题讨论】:
这就是document.write
所做的,它会覆盖document
!
所以如果我想让事情以这种方式工作,我想在每次按下按钮时重新创建按钮?
最好不要使用document.write
不,你应该不使用document.write
!!!
阅读了document.write
之后,你应该熟悉DOM操作方法createElement
、createTextNode
和appendChild
。
【参考方案1】:
我找到了一个解决方案,所以我可能会在这里发布它以防有人需要它。
首先,我在document.write("</tr>")
的printTitles()
中缺少一个分号,但这并不是程序无法运行的主要原因。
在听取了@Teemu 关于函数createElement
、createTextNode
、appendChild
的建议并查看了其他有用的 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> 按钮在点击时消失的主要内容,如果未能解决你的问题,请参考以下文章