如何从HTML数字输入框取值？JS简易计算器问题解决

学习JS一周后，我尝试做个简易计算器检验学习成果，但在获取HTML数字输入框的用户输入值时遇到了问题。

我的HTML代码 #

<div class="container">
    <input id="first-number" type="number" placeholder="first number">
    <input id="second-number" type="number" placeholder="second number">
    <br /><br />
    <button id="multiplication" onclick="multiply()">Mutliply</button>
    <button id="addition" onclick="addition()">Addition</button>
    <button id="subtraction" onclick="subtraction()">Subtraction</button>
    <button id="divison" onclick="division()">Divison</button>
    <br /><br />
    Your answer is <b><span id="final-answer"></span></b>
</div>

初始JS代码 #

let firstNumber = document.getElementById("first-number").value;
let secondNumber = document.getElementById("second-number").value;

function multiply() {
    finalAnswser = firstNumber + secondNumber;
    document.getElementById("final-answer").innerHTML = finalAnswser;
    console.log(firstNumber);
};

我先调试multiply函数，原以为其余函数只要换运算符就行，但代码根本跑不起来。注：我还没学.value属性，是谷歌搜的方案，但没用。

第一次修改：将变量声明移至函数内部 #

把firstNumber和secondNumber的声明移到每个函数里，更新后的JS代码如下：

function multiply() {
    let firstNumber = document.getElementById("first-number").value;
    let secondNumber = document.getElementById("second-number").value;
    finalAnswser = firstNumber * secondNumber;
    document.getElementById("final-answer").innerHTML = finalAnswser;
    console.log(firstNumber);
};

function addition() {
    let firstNumber = document.getElementById("first-number").value;
    let secondNumber = document.getElementById("second-number").value;
    finalAnswser = firstNumber + secondNumber;
    document.getElementById("final-answer").innerHTML = finalAnswser;
    console.log(firstNumber);
};

function subtraction() {
    let firstNumber = document.getElementById("first-number").value;
    let secondNumber = document.getElementById("second-number").value;
    finalAnswser = firstNumber - secondNumber;
    document.getElementById("final-answer").innerHTML = finalAnswser;
    console.log(firstNumber);
};

function division() {
    let firstNumber = document.getElementById("first-number").value;
    let secondNumber = document.getElementById("second-number").value;
    finalAnswser = firstNumber / secondNumber;
    document.getElementById("final-answer").innerHTML = finalAnswser;
    console.log(firstNumber);
};

这次修改后，乘法、除法、减法功能正常，但加法函数把两个输入值当成字符串拼接，而不是数字相加。

第二次修改：用Number()转换输入值 #

把所有函数内的变量声明换成用Number()转换输入值的写法，问题就解决了。修改后的变量声明代码如下：

let firstNumber = Number(document.getElementById("first-number").value);
let secondNumber = Number(document.getElementById("second-number").value);

内容的提问来源于stack exchange，提问作者Shahzad S.