gpt4 book ai didi

javascript - 带有 xml 的两个按钮 javascript(需要一些帮助)

转载 作者:行者123 更新时间:2023-12-03 00:17:29 25 4
gpt4 key购买 nike

我用加载我的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>

最佳答案

好的,这里进行一些更改以正确支持下一个/上一个。

  1. 我们分离了数据加载(因此它只加载一次)
  2. 我们为下一个和上一个添加了单独的点击事件
  3. 添加了获取当前位置并显示的方法。

注意:可能存在语法错误,因为没有可针对其运行的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com