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

fnatzsnv 于 2023-01-16 发布在 Java

关注(0)|答案(3)|浏览(232)

<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
可能是个愚蠢的问题，我只是个学生，刚开始学习这门语言，希望能从我的前辈那里得到肯定的回答谢谢。

JavaScript

来源：https://stackoverflow.com/questions/75116959/how-do-i-convert-the-inner-div-text-in-number

3条答案

按热度按时间

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之间的值。
还应确保运行状况的初始值是数字而不是字符串，否则可能会遇到意外行为。
希望这有帮助!

赞(0）回复(0）举报 2023-01-16

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>

赞(0）回复(0）举报 2023-01-16

8i9zcol23#

第一：使用内联事件处理程序通常是not a good idea。
第二：html元素中的属性和文本 * 总是 * 字符串，因此，要使用它执行计算，需要一个步骤将这样的值转换为实际的Number。（函数Number，parseInt，parseFloat或简单地将+放在字符串之前）。为什么？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>

赞(0）回复(0）举报 2023-01-16

我来回答

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

3条答案

相关问题

热门标签

最新问答