我如何在数字转换内部Div文本?

<button onclick = "p1Heal()" id="heal">Heal</button>
<div id="p1Health">100</div>

实际上我想让生命值增加1-5之间的随机数，所以我使用了Math。随机的，但是它将字符串和数字

连接起来I tried doing this:

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

可能是一个愚蠢的问题，只是一个刚开始学习这门语言的学生，希望从我的高级研究员那里得到一个积极的答复谢谢你。

问题是你使用了"+="操作符将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。floor as Math.random()返回一个介于0和1之间的十进制数，因此将它与5相乘将得到介于0和4.99之间，当四舍五入时将得到介于0和4之间。

还应确保运行状况的初始值是数字而不是字符串，否则可能会遇到意外行为。

希望这对你有帮助!

首先:使用内联事件处理程序通常不是一个好主意。

第二:html元素中的属性和文本总是字符串。因此，为了使用它进行计算，您需要一个步骤将这样的值转换为实际的Number。有几种方法可以做到这一点(函数Number,parseInt,parseFloat或简单地将+放在字符串之前)。为什么?Ecmascript是松散类型的，并将数字添加到字符串中解释为字符串连接。参见:MDN.

第三:innerHTML在这里是不必要的，甚至可能是不安全的，所以使用textContent。

下面是考虑到上述问题的一小段代码。它使用事件委托来处理按钮单击。作为奖励，它包含一个随机数函数，该函数使用更现代的crypto库(另见)。

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>

您遇到的问题是，您试图将数字添加到字符串中。要解决这个问题，您需要将字符串转换为数字，然后将它们相加。

留下一些代码供您结帐。

<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>

相关内容

最新更新

热门标签：