为什么 output 值显示为 NaN

Question

该代码应该找到以小时和分钟为单位输入的两次总和，但它给了我 output“NaN”。

 function add() { var min, hrs; let a = Number(document.getElementById("first")); let b = Number(document.getElementById("third")); let c = Number(document.getElementById("second")); let d = Number(document.getElementById("fourth")); min = c + d; hrs = min / 60; min = min % 60; hrs = hrs + a + b; document.write(hrs); document.write(min); }

 <h1>Time Calculator</h1> <h2>This calculator can be used to “add” two time values.</h2> Enter hours: <input id="first"> Enter Minutes: <input id="second"> Enter hours: <input id="third"> Enter Minutes: <input id="fourth"> <button onclick="add()">ADD</button>

Answer 1

您缺少对getElementById的价值调用：所以：

  let a = Number(document.getElementById("first").value);
  let b = Number(document.getElementById("third").value);
  let c = Number(document.getElementById("second").value);
  let d = Number(document.getElementById("fourth").value);

快速建议：将type="number"添加到输入以确保输入是数字。

<h1>Time Calculator</h1>
<h2>This calculator can be used to “add” two time values.</h2>
Enter hours: <input id="first" type="number"> 
Enter Minutes: <input id="second" type="number"> 
Enter hours: <input id="third" type="number">  
Enter Minutes: <input id="fourth" type="number">
<button onclick="add()">ADD</button>

完整代码：

function add() {
  var min, hrs;
  let a = Number(document.getElementById("first").value);
  let b = Number(document.getElementById("third").value);
  let c = Number(document.getElementById("second").value);
  let d = Number(document.getElementById("fourth").value);
  min = c + d;
  hrs = min / 60;
  min = min % 60;
  hrs = hrs + a + b;
  document.write(hrs);
  document.write(min);
}

Answer 2

请记住，您可以轻松地使用浏览器逐行调试代码

---

你会意识到，调用

document.getElementById("fourth")

将返回一个节点，但您正在用Number()将其包装起来

然后，您从Number() output 调用.value

你可以做的是，例如

        function getNumber(str) {
            return Number(document.getElementById(str).value);
        }
        function add() {
            var min, hrs;
            let a = getNumber("first");
            let b = getNumber("third");
            let c = getNumber("second");
            let d = getNumber("fourth");
            min = c + d;
            hrs = min / 60;
            min = min % 60;
            hrs = hrs + a + b;
            document.write(hrs);
            document.write(min);
        }

活生生的例子

 function getNumber(str) { return Number(document.getElementById(str).value); } function add() { var min, hrs; let a = getNumber("first"); let b = getNumber("third"); let c = getNumber("second"); let d = getNumber("fourth"); min = c + d; hrs = min / 60; min = min % 60; hrs = hrs + a + b; document.write(hrs); document.write(min); }

 <h1>Time Calculator</h1> <h2>This calculator can be used to “add” two time values.</h2> Enter hours: <input id="first"> Enter Minutes: <input id="second"> Enter hours: <input id="third"> Enter Minutes: <input id="fourth"> <button onclick="add()">ADD</button>