使用parseInt/parseFloat后，骰子值仍在连接

Question

我是javascript的新手，我正在尝试使用click事件侦听器从掷出的骰子中添加值。我曾尝试使用parseInt/parseFloat对数字求和，并使用inner.html显示值，但它们一直连接在一起。这是我的代码

const dice=document.getElementsByClassName("btn-roll")[0];
let diceImg=document.querySelector("#dice-1");
let diceImg2=document.querySelector("#dice-2");
let p1CurrentScore=document.getElementById("current-0");


    dice.addEventListener("click",function(){
    let random1=Math.floor(Math.random()* 6) +1;
    let random2=Math.floor(Math.random()* 6) +1;
    diceImg.src="dice-" + random1 +".png";
    diceImg2.src="dice-" + random2 +".png";
    let totalDice=random1+random2;
    let total=0;
    total= total + (p1CurrentScore.innerHTML+=totalDice);
    parseInt(total);
    })

Answer 1

由于该值存储在p1CurrentScore.innerHTML中，因此无需创建total变量。您要做的是将p1CurrentScore.innerHTML设置为等于其前一个值加上totalDice。

最终，您希望您的侦听器看起来如下所示：

dice.addEventListener("click",function(){
  let random1=Math.floor(Math.random()* 6) +1;
  let random2=Math.floor(Math.random()* 6) +1;
  diceImg.src = "dice-" + random1 + ".png";
  diceImg2.src = "dice-" + random2 + ".png";
  let totalDice=random1+random2;

  p1CurrentScore.innerHTML=parseInt(p1CurrentScore.innerHTML) + totalDice
})

下面是一个示例：https://470290.playcode.io

Answer 2

p1CurrentScore.innerHTML的值是一个字符串，当你对它求和时，将进行连接，结果是字符串。记住，当你对字符串和数字求和时，你得到的是连接的字符串。所以你需要对其进行解析：

total= total + ((parseInt(p1CurrentScore.innerHTML))+=totalDice); 

另一方面，如果从值为number的字符串中减去number，它将自动转换为number。所以你也可以做一些像(p1CurrentScore.innerHTML-0).这样的事情，我希望这对你有帮助。

Answer 3

在数学运算中使用文本之前，应使用parseInt转换文本。

如下所示：

const dice=document.getElementsByClassName("btn-roll")[0];
let diceImg=document.querySelector("#dice-1");
let diceImg2=document.querySelector("#dice-2");
let p1CurrentScore=document.getElementById("current-0");

dice.addEventListener("click",function(){
    let random1 = Math.floor(Math.random()* 6) +1;
    let random2 = Math.floor(Math.random()* 6) +1;
    diceImg.src = "dice-" + random1 + ".png";
    diceImg2.src = "dice-" + random2 + ".png";
    let totalDice = random1 + random2;
    let total = 0;
    total = total + (parseInt(p1CurrentScore.innerHTML) += totalDice); // -> Use parseInt before the operation
    // parseInt(total); -> Not necessary
})