我用加载我的xml文件的js制作html。 现在我有一个按钮，每次点击都会移动到下一个节点。 我如何使上一个按钮在每次点击它时返回。
<html>
<head>
<title>ReadingXmlFile</title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<center><h1>XML FILE</h1></center>
<input id="next" type="button" value="LoadXml" onclick="readXML()" />
<input id="previous" type="button" value="previus" onclick="readXML()" />
<div>
<p id="demo"></p>
</div>
<script type="text/javascript">
var i = 0;
function readXML() {
var xml = new XMLHttpRequest();
xml.open('GET', 'XMLFile.xml', false);
xml.send();
var xmlData = xml.responseXML;
if (xmlData) {
xmlData = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
var det = xmlData.getElementsByTagName("mydetails");
var name = det[i].getElementsByTagName("name")[0].firstChild.data;
var city = det[i].getElementsByTagName("city")[0].firstChild.data;
var bio = det[i].getElementsByTagName("bio")[0].firstChild.data;
document.getElementById("demo").innerHTML = "Name: " + name + "<br>" + "City: " + city + "<br>" + "Bio: " + bio;
i++;
}
}
</script>
</body>
</html>最佳答案
好的，这里进行一些更改以正确支持下一个/上一个。
- 我们分离了数据加载(因此它只加载一次)
- 我们为下一个和上一个添加了单独的点击事件
- 添加了获取当前位置并显示的方法。
注意:可能存在语法错误，因为没有可针对其运行的 XML。抱歉。
var i = 0;
var xmlData = undefined;
const setInnerHTML = (position) => {
if (xmlData) {
let det = xmlData.getElementsByTagName("mydetails");
let name = det[position].getElementsByTagName("name")[0].firstChild.data;
let city = det[position].getElementsByTagName("city")[0].firstChild.data;
let bio = det[position].getElementsByTagName("bio")[0].firstChild.data;
document.getElementById("demo").innerHTML = "Name: " + name + "<br>" + "City: " + city + "<br>" + "Bio: " + bio;
}
};
// Add a document load event, load the XML just once
document.addEventListener('DOMContentLoaded', function() => {
readXml(() => {
// Show initial data when XML has loaded
setInnerHTML(i);
});
// Add our click events for previous and next
document.querySelector('#next').addEventListener('click', (evet) => {
i++;
setInnerHTML(i);
});
document.querySelector('#previous').addEventListener('click', (evet) => {
i--;
setInnerHTML(i);
});
});
// This function only loads XML now.
function readXML(onComplete) {
let xml = new XMLHttpRequest();
xml.open('GET', 'XMLFile.xml', false);
xml.onload = function() {
if (xml.status >= 200 && xml.status < 400) {
xmlData = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
if (onComplete) onComplete();
};
xml.send();
}
}<html>
<head>
<title>ReadingXmlFile</title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<center>
<h1>XML FILE</h1>
</center>
<input id="next" type="button" value="LoadXml" />
<input id="previous" type="button" value="previus" />
<div>
<p id="demo"></p>
</div>
</body>
</html>关于javascript - 带有 xml 的两个按钮 javascript(需要一些帮助)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54483677/