Question

代码：

<!DOCTYPE html>
<html>
<head>
<title>xxxxxxxxxxx</title>
</head>
<input id="nr1" type="text"></br>
<input id="calc" type="button" onClick="calc();return false;" value="calc">
<div id="result"></div>
<script>
const nr1 = document.getElementById("nr1").value;
const nr2 = 13;
const button = document.getElementById("calc");
function calc() {
   if(nr1 - nr2 >= 13){
       document.getElementById("result").innerHTML = (nr1-nr2)*2;
   }
   else {
       document.getElementById("result").innerHTML = nr1-nr2;
   }
}
</script>
</body>
</html>

为什么我输入的每个号码都显示-13？我想我错过了一些东西，但我无法得到正在发生的事情。

Answer 1

用户输入的值存储在DOM加载中，该加载在该点为空。换句话说，缓存输入，而不是其value。必须将输入转换为数字才能执行算术运算。

＆＃13;

const 
nr2 = 13,
nr1 = document.getElementById("nr1"),
button = document.getElementById("calc");

function calc() {

  let n1 = Number( nr1.value ); // convert to number. See browser support

  if(n1 - nr2 >= 13) {
    document.getElementById("result").innerHTML = (n1-nr2)*2;
  } else {
    document.getElementById("result").innerHTML = n1-nr2;
  }
}

＆＃13;

<input id="nr1" type="text"></br>
<input id="calc" type="button" onClick="calc();return false;" value="calc">
<div id="result"></div>

＆＃13;

对于我输入的每个数字，给定数字和13之间的差异显示-13

1 个答案: