HTML <input> button(s) disappear on click
Question
I am reading an XML file using JavaScript, and this part works as I am getting the data. Here is the XML file:
<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>
Now I use JavaScript to display that data in a table. Also, I added two <input> buttons that each have an onclick attribute to call a specific function. One button calls the change() and the other calls remove() .
Here is the code for the HTML page and 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>
When I click the change button, both buttons disappear. When I click the remove button, only remove button disappears.
Here are all 3 states of my page (I cannot upload a photo because I don't have the rep):
http://postimg.org/image/5lrwf7rcz/
Now, I already searched for an answer and this question or this question answers didn't help me. I couldn't find a missing closing tag and returning false doesn't change anything.
UPDATE: I ran the debugger on Chrome and when I click the remove button, the remove() function never gets called but when I click the change button, the change() function does get called .
1 answers
solution1
0 ACCPTED 2014-09-26 16:35:59
I found a solution so I though I might post it here in case somebody needs it.
First of all, I was missing a semicolon inside the printTitles() at document.write("</tr>") but that wasn't the main reason behind the program not working.
After taking @Teemu's advice on functions createElement , createTextNode , appendChild and reviewing other helpful comments, I changed the code a lot. I used the mentioned functions and added the window.onload check to make sure I can edit the body after the page loads.
XML file stays the same and here is my HTML file with 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.