// html代码计算
两个数字的加法
var x = parseFloat(document.getElementById("n1").value); //input value1
var y = parseFloat(document.getElementById("n2").value); //input value2
var btn = document.getElementById("ans");
btn.addEventListener("click",function(){
var result = x + y ; //expression
console.log(result); // output as 'Nan'
console.log(typeof(result)); // output as 'number'
});
这里的问题是，您已将默认值设置为x和y，开头是空字符串，例如：
var x = parseFloat(document.getElementById("n1").value); //input value1
var y = parseFloat(document.getElementById("n2").value); //input value2
因此，无论您在输入中输入什么值，都将始终获得Nan。这是现在正在发生的事情：
var x = parseFloat(""); //input value1
var y = parseFloat(""); //input value2
var btn = document.getElementById("ans");
btn.addEventListener("click", function() {
var result = x + y; //expression
console.log(result); // output as 'Nan'
console.log(typeof(result)); // output as 'number'
});<button id="ans">ADD</button>解决此问题的唯一方法是将变量放在click内，以便在单击按钮时只有您才能获得每个输入的最新值，例如：
var btn = document.getElementById("ans");
btn.addEventListener("click", function() {
var x = parseFloat(document.getElementById("n1").value); //input value1
var y = parseFloat(document.getElementById("n2").value); //input value2
var result = x + y;
console.log(result);
console.log(typeof(result));
});<input type="text" id="n1">
<input type="text" id="n2">
<button id="ans">ADD</button>此外，如果您仅在此处使用数字，则可以使用<input type="number" />代替<input type="text" />，例如：
var btn = document.getElementById("ans");
btn.addEventListener("click", function() {
var x = parseFloat(document.getElementById("n1").value); //input value1
var y = parseFloat(document.getElementById("n2").value); //input value2
var result = x + y;
console.log(result);
console.log(typeof(result));
});<input type="number" id="n1">
<input type="number" id="n2">
<button id="ans">ADD</button>请确保在页面加载后执行您的JavaScript。例如：
document.onload = function () {}
或
window.onload = function () {}
或
<body onload="..">
或带有
<script ... defer>
否则，.value将返回未定义，结果将为NaN。
如果在发生任何事件之前访问输入字段的值，我们将无法定义，因此我们可以在生成click事件之后访问该字段的值。
<input type="text" id="n1" name="name">
<input type="text" id="n2" name="emai">
<input type="submit" id="ans" value="Submit">
<script>
var btn = document.getElementById("ans");
btn.addEventListener("click",function(){
var x = parseFloat(document.getElementById("n1").value);
var y = parseFloat(document.getElementById("n2").value);
var result = x + y ; //expression
console.log(result); // output as 'Nan'
console.log(typeof(result)); // output as 'number'
});
</script>
let btn = document.getElementById("ans")
btn.addEventListener("click", function() {
let x = getFloat(getElVal("n1"))
let y = getFloat(getElVal("n2"))
let result = x + y
if (!isNaN(x) && !isNaN(y)) {
console.log('valid op')
}
console.log(result);
console.log(typeof(result))
function getFloat(val) {
return parseFloat(val)
}
function getElVal(id) {
ele = document.getElementById(id)
return ele? ele.value:undefined
}
})<input type="text" id="n1">
<input type="text" id="n2">
<button id="ans">ADD</button>