嗨,我正在尝试使用原始JavaScript构建游戏仪表板。问题是,它始终显示前一个元素。我使用setInterval
进行刷新。
这是一个例子
的JavaScript
function fetching() {
...
.then(data => {
dataApply(data)
})
...
}
function dataApply(data) {
data.EneymyHealth.forEach(monster => {
if (monster.isAlive) { //Check monster alive
const p = document.createElement('p'); //Create <p> element
p.innerHTML = monster.HP; //Add monster's HP into <p>
enemyWrapper.appendChild(p); //Attach <p> into <div id="wrapper">
}
})
}
setInterval(fetching, 1000);
但是当我通过网络浏览器检查时。结果很奇怪。
<div id="wrapper">
....
<p>2000</p>
<p>2000</p>
<p>2000</p>
....
</div>
它由
setInterval
循环,但<p>
元素不会删除。它仍然显示前一个。如何将其删除?谢谢您的回答。
注意
我想建立一个实时怪物仪表板。因此,我认为
setInterval
是实时HP怪物的最佳选择。 (与第三方游戏同步) 最佳答案
问题是您没有在运行循环之前移除敌人
你要做的是
enemyWrapper.querySelectorAll('.enemy').forEach((currEnemy) {
currEnemy.remove();
});
data.EneymyHealth.forEach(monster => {
if (monster.isAlive) { //Check monster alive
const p = document.createElement('p'); //Create <p> element
p.classList.add('enemy')
p.innerHTML = monster.HP; //Add monster's HP into <p>
enemyWrapper.appendChild(p); //Attach <p> into <div id="wrapper">
}
})
我所做的是,我向所有敌人添加了类敌人,并且在将其添加到DOM之前,删除了所有敌人,以便只能在DOM中重新渲染活着的敌人