javascript 如何将内部Div文本转换为数字?

fnatzsnv  于 2023-01-16  发布在  Java
关注(0)|答案(3)|浏览(233)
<button onclick = "p1Heal()" id="heal">Heal</button>
<div id="p1Health">100</div>

实际上,我想通过1 - 5之间的某个随机数来增加健康值,所以我使用了Math. random,但它将字符串和数字连接在一起
我试着这么做:

let p1HealthDiv = document.getElementById('p1Health')
function p1Heal(){
  const p1Heall = Math.floor(Math.random()*5);
  p1HealthDiv.innerHTML += `${Number(p1Heall)}`
}

而是与字符串即100连接,我得到的输出是:如果健康状况为91,则在div中添加(0/1/2/3/4)并显示为912,我实际上希望将其增加到+(0到4之间的任何数字),如下所示:94
可能是个愚蠢的问题,我只是个学生,刚开始学习这门语言,希望能从我的前辈那里得到肯定的回答谢谢。

j2qf4p5b

j2qf4p5b1#

问题是您使用"+="运算符将p1Heall的值连接到p1HealthDiv元素的现有值。相反,您应该使用"+"运算符将p1Heall的值添加到现有值。
您可以通过更改以下行来解决此问题:

p1HealthDiv.innerHTML += ${Number(p1Heall)}

致:

p1HealthDiv.innerHTML = Number(p1HealthDiv.innerHTML) + p1Heall;

这会将p1Heall的值添加到p1HealthDiv元素的现有值中,并更新HTML以反映新值。
另一种方法是使用innerText属性而不是innerHTML,并执行以下操作:

p1HealthDiv.innerText = Number(p1HealthDiv.innerText) + p1Heall;

此外,您不需要像Math. random()那样使用Math. floor,它返回0到1之间的十进制数,因此将其乘以5将得到0到4.99之间的值,向下舍入后将得到0到4之间的值。
还应确保运行状况的初始值是数字而不是字符串,否则可能会遇到意外行为。
希望这有帮助!

vql8enpb

vql8enpb2#

您遇到的问题是您试图将数字添加到字符串中。要解决此问题,您需要将字符串转换为数字,然后将它们相加。
留了些代码让你结账。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="p1Health">100</div>
    <button onclick="p1Heal()" id="heal">Heal</button>
    <script>
      let p1HealthDiv = document.getElementById("p1Health");
      function p1Heal() {
        const p1Heall = Math.floor(Math.random() * 5);
        console.log(p1Heall);
        console.log(p1HealthDiv.innerText);
        console.log(typeof p1Heall);
        console.log(typeof p1HealthDiv);
        p1HealthDiv.innerText = parseInt(p1HealthDiv.innerText) + p1Heall;
      }
    </script>
  </body>
</html>
8i9zcol2

8i9zcol23#

第一:使用内联事件处理程序通常是not a good idea
第二:html元素中的属性和文本 * 总是 * 字符串,因此,要使用它执行计算,需要一个步骤将这样的值转换为实际的Number。(函数NumberparseIntparseFloat或简单地将+放在字符串之前)。为什么?Ecmascript是松散类型的,它将数字添加到字符串解释为字符串串联。另请参阅:MDN.
第三:这里不需要innerHTML,甚至可以是unsafe,所以使用textContent
这里有一个小片段考虑到了前面提到的内容,它使用event delegation来处理按钮点击,另外它还包含一个随机数函数,该函数使用了更现代的crypto库(see also)。

const randomNr = (min = 0, max = Number.MAX_SAFE_INTEGER) => 
  Math.floor( ([...crypto
    .getRandomValues(new Uint32Array(1))][0] / (2 ** 32) ) * 
      (max - min + 1) + min );
document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.id === `heal`) {
    const p1Health = document.getElementById(`p1Health`);
    const randomValue = randomNr(0, 5);
    p1Health.textContent = +p1Health.textContent + randomValue;
    //                     ^ conversion
    document.querySelector(`#addDemo`).textContent = `(last added: ${
     randomValue})`;
  }
}
<button id="heal">Heal</button>
<span id="p1Health">100</span> <span id="addDemo"></span>

相关问题