<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
可能是个愚蠢的问题,我只是个学生,刚开始学习这门语言,希望能从我的前辈那里得到肯定的回答谢谢。
3条答案
按热度按时间j2qf4p5b1#
问题是您使用"+="运算符将p1Heall的值连接到p1HealthDiv元素的现有值。相反,您应该使用"+"运算符将p1Heall的值添加到现有值。
您可以通过更改以下行来解决此问题:
致:
这会将p1Heall的值添加到p1HealthDiv元素的现有值中,并更新HTML以反映新值。
另一种方法是使用innerText属性而不是innerHTML,并执行以下操作:
此外,您不需要像Math. random()那样使用Math. floor,它返回0到1之间的十进制数,因此将其乘以5将得到0到4.99之间的值,向下舍入后将得到0到4之间的值。
还应确保运行状况的初始值是数字而不是字符串,否则可能会遇到意外行为。
希望这有帮助!
vql8enpb2#
您遇到的问题是您试图将数字添加到字符串中。要解决此问题,您需要将字符串转换为数字,然后将它们相加。
留了些代码让你结账。
8i9zcol23#
第一:使用内联事件处理程序通常是not a good idea。
第二:html元素中的属性和文本 * 总是 * 字符串,因此,要使用它执行计算,需要一个步骤将这样的值转换为实际的
Number
。(函数Number
,parseInt
,parseFloat
或简单地将+
放在字符串之前)。为什么?Ecmascript是松散类型的,它将数字添加到字符串解释为字符串串联。另请参阅:MDN.第三:这里不需要
innerHTML
,甚至可以是unsafe,所以使用textContent
。这里有一个小片段考虑到了前面提到的内容,它使用event delegation来处理按钮点击,另外它还包含一个随机数函数,该函数使用了更现代的
crypto
库(see also)。