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

Question

我是 javascript 的新手，我正在尝试使用单击事件侦听器从掷骰子中添加值。 我尝试使用 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

无需创建total变量，因为该值存储在p1CurrentScore.innerHTML中。 您要做的是将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); 

另一方面，如果从字符串中减去数值为数字的数字，它将自动转换为数字。 所以你也可以做类似(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
})