嗨,我正在尝试使用原始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中重新渲染活着的敌人

10-05 20:36
查看更多