我可以将 getElementbyId 转换为数字以在 JavaScript 中进行数学运算吗？

Question

这是一个基本的计算器项目。我无法 return 结果，单击任何按钮后它 returns NaN。它与输入以及它如何转换为数字有关，但“.value”似乎不起作用

html 文件:

<!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>Calculator</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Calculator</h1>
    <input type="text" id="num1-el">
    <input type="text" id="num2-el">

    <button onclick="add()">Add</button>
    <button onclick="subtract()">Subtract</button>
    <button onclick="divide()">Divide</button>
    <button onclick="multiply()">Multiply</button>

    <p id="sum-el">Sum: </p>
    <script src="/script.js"></script>
</body>
</html>

在 JS 文件中，我可以看到变量获取了元素，但它无法对它们进行数学运算，即使使用 parseInt 和 .value

JavaScript 文件：

let num1 = parseInt(document.getElementById("num1-el").value)
let num2 = parseInt(document.getElementById("num2-el").value) 

let sum = document.getElementById("sum-el")

let operation

function add() {
    operation = num1 + num2;
    sum.textContent += operation + " | ";
}

function subtract() {
    operation = num1 - num2;
    sum.textContent += operation + " | ";
}

function divide() {
    operation = num1 / num2;
    sum.textContent += operation + " | ";  
}

function multiply() {
    operation = num1 * num2;
    sum.textContent += operation + " | ";
}

有人可以帮忙吗？谢谢！ ps: 这是我在 stack overflow 中的第一个问题，英语不是我的第一语言，所以对于任何基本错误我提前道歉

Answer 1

当脚本运行时，num1 和 num2 第一次获取它们的值，并且两者都是未定义的。因此，当您单击按钮并触发功能时，所有结果将是 NaN。试试这个方法：

let num1, num2

function getNumbers() {
    num1 = parseInt(document.getElementById("num1-el").value)
    num2 = parseInt(document.getElementById("num2-el").value)
}

function add() {
    getNumbers();
    operation = num1 + num2;
    sum.textContent += operation + " | ";
}

/* other functions */

我可以将 getElementbyId 转换为数字以在 JavaScript 中进行数学运算吗？

Can I convert an getElementbyId into a number to make a math operation in JavaScript?

html

javascript

calculator