带xml的双按钮javascript（需要一些帮助）

我用js制作html，加载我的xml文件。 现在我有了一个按钮，每次点击都会移动到下一个节点。 我如何使previus按钮在每次点击时返回

读取XML文件
XML文件

var i=0；
函数readXML（）{
var xml=new XMLHttpRequest（）；
open（'GET'，'XMLFile.xml'，false）；
xml.send（）；
var xmlData=xml.responseXML；
if（xmlData）{
xmlData=（新的DOMParser（））.parseFromString（xml.responseText，'text/xml'）；
var det=xmlData.getElementsByTagName（“mydetails”）；
var name=det[i]。getElementsByTagName（“名称”）[0]。firstChild.data；
var city=det[i]。getElementsByTagName（“城市”）[0]。firstChild.data；
var bio=det[i]。getElementsByTagName（“bio”）[0]。firstChild.data；
document.getElementById（“demo”）.innerHTML=“Name:”+Name+”
“+”City:“+City+”
“+”Bio:”+Bio；
i++；
}
}

好的，这里有一些更改以正确支持下一个/上一个

我们拆分了数据加载（因此它只加载一次）

我们为下一个和上一个添加了单独的点击事件

添加了采用当前位置并显示的方法

注意：可能存在语法错误，因为没有可运行此操作的XML。对不起

var i=0；
var xmlData=未定义；
const setInnerHTML=（位置）=>{
if（xmlData）{
让det=xmlData.getElementsByTagName（“mydetails”）；
让name=det[position].getElementsByTagName（“name”）[0].firstChild.data；
让city=det[position]。getElementsByTagName（“城市”）[0]。firstChild.data；
让bio=det[position].getElementsByTagName（“bio”）[0].firstChild.data；
document.getElementById（“demo”）.innerHTML=“Name:”+Name+”
“+”City:“+City+”
“+”Bio:”+Bio；
}
};
//添加一个文档加载事件，只加载一次XML
document.addEventListener（'DOMContentLoaded'，function（）=>{
readXml（（）=>{
//加载XML后显示初始数据
setInnerHTML（i）；
});
//添加上一个和下一个的单击事件
document.querySelector（“#next”）.addEventListener（'click'，（evet）=>{
i++；
setInnerHTML（i）；
});
document.querySelector（“#previous”）.addEventListener（'click'，（evet）=>{
我--；
setInnerHTML（i）；
});
});
//此函数现在只加载XML。
函数readXML（onComplete）{
让xml=newXMLHttpRequest（）；
open（'GET'，'XMLFile.xml'，false）；
xml.onload=函数（）{
如果（xml.status>=200&&xml.status<400）{
xmlData=（新的DOMParser（））.parseFromString（xml.responseText，'text/xml'）；
如果（onComplete）onComplete（）；
};
xml.send（）；
}
}

读取XML文件
XML文件

您能提供一个您的XMLFile.xml的示例吗？这是否有效

XMLHttpRequest

是异步的，您需要更改代码。假设这就是为什么您有

if（xmlData）

，因为这个问题正在发生。下一步按钮工作。我需要做previus按钮。