Javascript - 如何清除 DIV 中的先前值？

Question

我正在制作一款游戏，其中有 2 名玩家互相战斗。

我在文档写入对象 hp (100) 的位置进行了设置。但是，当我制作一个玩家受到 10 点伤害的事件时，它应该在 hp 条中写出 90。相反，它会写出 10090。

我怎样才能在更新前一个值的地方得到它，而不是继续在前一个值旁边写入？

function player (hp, mana, stamina){
    this.hp = hp;
    this.mana = mana;
    this.stamina = stamina; 
    }

function npc (hp, mana, stamina) {
    this.hp = hp;
    this.mana = mana;
    this.stamina = stamina;
    }

var alistar = new player (100, 50, 30);
var dragon = new npc (100, 50, 30);

document.getElementById("hp").innerHTML += alistar.hp;

if ( 0 < 1) {
    alistar.hp = alistar.hp - 10;
    document.getElementById("hp").innerHTML += alistar.hp;
}

做 = 符号是有效的，但它删除了我在那里的所有 HTML 单词。我想我可以为我的 HTML 需求制作第二个 div 框，并将值分开。

Answer 1

只用 = 符号代替 +=:

= 运算符覆盖以前的值。另一方面，+= 是 + 运算符和 = 运算符的联合，是实现下一个:

例如，如果你想给一个变量添加一个值，你可以这样做:

var a = 3,
    value = 10; /* Your value, i.e. 10 */

a = a + value; /* a values 13 */

但是，您可以使用+= 运算符获得相同的结果:

var a = 3,
    value = 10; /* Your value, i.e. 10 */

a = += value; /* This adds the value of a to the value of value variable. */

正如您所想，a 的值也是 13，如下例所示。

---

关于您的代码...

代码:

if ( 0 < 1) {
    alistar.hp = alistar.hp - 10;
    document.getElementById("hp").innerHTML = alistar.hp; /* UPDATE */
}