JavaScript生成0~10的随机数并输出做两个数的加减法

JavaScript014

JavaScript生成0~10的随机数并输出做两个数的加减法,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<input id="btn" type="button" value="生成随机数">

<p id="one">生成的第一个数</p>

<p id="two">生成的第二个数</p>

<span id="add">两数相加:</span>

<br>

<span id="minus">两数相减:</span>

<script>

var btn = document.getElementById('btn')

var oone = document.getElementById('one')

var otwo = document.getElementById('two')

var oadd = document.getElementById('add')

var ominus = document.getElementById('minus')

btn.onclick = function (){

oone.innerHTML = parseInt(10*Math.random())

otwo.innerHTML = parseInt(10*Math.random())

var first = oone.innerHTML

var second = otwo.innerHTML

oadd.innerHTML = "两数相加:" + (parseInt(first) + parseInt(second))

ominus.innerHTML = "两数相减:" + (parseInt(first) - parseInt(second))

}

</script>

</body>

</html>

求和就跟数学一样,直接相加就可以了啊。

我猜你的问题出在获取span的内容上,如果你直接用 a.innerHTML + b.innerHTML ,得到的不是21,而是1011。

原因并不是因为 js 中不能直接进行加法运算,而是因为数据类型导致。

要记住一点:所有通过标签获取到的内容,都是字符串。

也就是说,通过标签的, value, innerHTML 等得到的值,都是一个字符串值,而js中,用加号来对字符串进行求和,实际是做字符串连接。比如 '1' + '2' ,得到的是 '12',而不是3. 因为加号左右都是字符串。在js 中,只要加号的任何一边的值是字符串,最终都是进行字符串连接,而不是求和。

想要实现求和,就需要把字符串变成数字,再使用加号,在js中,将字符串变成数字最简单的做法是乘以1,比如 '1'*1 + '2'*1 ,结果就是3了。这个属于JS的隐式类型转换,如果你学过这个知识点,自然知道是什么意思 ,如果还没学过,那就先知道这个技巧就行。

所以你上面的效果,要实现求和,只需要这样:

a.innerHTML * 1 + b.innerHTML * 1, 就可以实现求和啦。