<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, 就可以实现求和啦。