我试图从输入表单中添加2个数字作为值。typeof(parseInt(value1))和typeof(parseInt(value2))返回数值但是parseInt(value1)+parseInt(value2)返回NaN。请有人解释一下
var input1 = document.getElementById('num1')
var input2 = document.getElementById('num2')
var value1 = input1.value
var value2 = input2.value
btn.addEventListener('click', myfunc)
function myfunc() {
alert(typeof(parseInt(value1)))
alert(typeof(parseInt(value2)))
alert(parseInt(value1)+parseInt(value2))
}<!DOCTYPE html>
<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>Tính toán</title>
</head>
<body>
<form action="">
<div>
<label for="num1">Number 1</label>
<div>
<input type="number" name="num1" id="num1" />
<span class="error" id="errNum1">(*)</span>
</div>
</div>
<div>
<label for="num2">Number 2</label>
<div>
<input type="number" name="num2" id="num2" />
<span class="error" id="errNum2">(*)</span>
</div>
</div>
<div></div>
<div>
<input type="button" value="Tính toán" id="btn" />
</div>
</form>
<script src="js.js"></script>
</body>
</html>在加载页面时获得输入的值，因此它们将始终为空。相反，您希望在单击按钮时获得值。
btn.addEventListener('click', myfunc)
function myfunc() {
var input1 = document.getElementById('num1')
var input2 = document.getElementById('num2')
var value1 = input1.value
var value2 = input2.value
alert(typeof(parseInt(value1)))
alert(typeof(parseInt(value2)))
alert(parseInt(value1)+parseInt(value2))
}
正确的做法是:
你不需要使用parseInt()输入类型=数字，
只使用valueAsNumber属性
const myForm = document.forms['my-form']
myForm.btn.onclick = evt =>
{
console.clear()
console.log(typeof myForm.num1.valueAsNumber)
console.log(typeof myForm.num2.valueAsNumber)
console.log( myForm.num1.valueAsNumber + myForm.num2.valueAsNumber )
}label
, button {
display : block;
margin : .3em;
}<form action="" name='my-form'>
<label>
Number 1
<input type="number" name="num1" value="0" >
</label>
<label>
Number 2
<input type="number" name="num2" value="0" >
</label>
<button name="btn" type="button"> Tính toán </button>
</form>