帶有一些按鈕的計算器 JavaScript

Question

我想用 JS 做一個計算器。 我是 JS 的新手，我不明白為什么它不起作用。 在瀏覽器控制台中，如果我調用 add()，我將得到未定義。
getInputAsNumber(...) 應該從字段中檢索輸入值，ID 作為參數傳遞 writeResult() 將計算結果寫入 output 字段，並在所有操作中使用

 "use strict"; function add() { let operator1; let operator2; getInputAsNumber(operator1, operator2); let summe = operator1 + operator2; writeResult(summe); } function getInputAsNumber(op1, op2) { op1 = document.getElementById("op1").value; op2 = document.getElementById("op2").value; } function writeResult(result) { let outputElement = document.getElementById("output1"); outputElement.innerHTML = Number.result; }

 <form> <h1>Calculator with Buttons</h1> <label>Operand 1:</label> <input id="op1" type="number"> <br> <br> <label>Operand 2:</label> <input id="op2" type="number"> <br> <br> <label>Operators: </label> <button>+</button> <button>-</button> <button>*</button> <button>/</button> <br> <br> <div id="result"> <label>Result: </label> <output id="output1"></output> </div> </form>

Answer 1

您將 op1 和 op2 作為引用參數傳遞，但它們實際上是按值調用的（這意味着，在函數內部更改時它們不會更改）。 您得到未定義，因為 operator1 和 operator2 僅被聲明（未初始化）。

您可以修改 function 以便它返回兩個運算符（而不是傳遞它們）：

 function add() { let {operator1, operator2} = getInputAsNumber(); let summe = operator1 + operator2; writeResult(summe); } function getInputAsNumber() { const op1 = document.getElementById("op1").value; const op2 = document.getElementById("op2").value; return {operator1: parseFloat(op1), operator2: parseFloat(op2)}; } function writeResult(result) { let outputElement = document.getElementById("output1"); outputElement.innerHTML = result; }

 <h1>Calculator with Buttons</h1> <label>Operand 1:</label> <input id="op1" type="number"> <br> <br> <label>Operand 2:</label> <input id="op2" type="number"> <br> <br> <label>Operators: </label> <button onClick="add()">+</button> <button>-</button> <button>*</button> <button>/</button> <br> <br> <div id="result"> <label>Result: </label> <output id="output1"></output> </div>

這個 function 返回一個由 operator1 和 2 組成的 object 並使用 object 展開（getInputAsNumber 調用的左側），您可以輕松獲取這兩個值。 另外：僅讀取輸入字段（.value）的值會檢索到一個字符串（,），在 JavaScript 中添加兩個字符串意味着連接（“2”+“2”=“22”）。 所以你需要先解析它們。

Answer 2

我在您的代碼中看到的主要問題是：

• 您需要更直接地傳遞op1和op2 ，或者 [如下] 全局設置它們，以便根本不需要傳遞它們
• 你可以只使用result ，而不是Number.result [為什么Number. 首先？]
• 您可能需要使用parseInt將輸入從字符串解析為數字然后，如果您將onclick屬性添加到您的按鈕或使用 enventListener，您可以使計算器完全工作

 "use strict"; var operator1; var operator2; function calcOp(operator) { getInputAsNumber(); var op; if (operator == 'add') { writeResult(operator1 + operator2); } else if (operator == 'sub') { writeResult(operator1 - operator2); } else if (operator == 'mul') { writeResult(operator1 * operator2); } else if (operator == 'div') { writeResult(operator1 / operator2); } } function getInputAsNumber() { operator1 = parseInt(document.getElementById("op1").value); operator2 = parseInt(document.getElementById("op2").value); } function writeResult(result) { let outputElement = document.getElementById("output1x"); outputElement.value = result; }

 <h1>Calculator with Buttons</h1> <label>Operand 1:</label> <input id="op1" type="number"> <br> <br> <label>Operand 2:</label> <input id="op2" type="number"> <br> <br> <label>Operators: </label> <button onclick="calcOp('add');">+</button> <button onclick="calcOp('sub');">-</button> <button onclick="calcOp('mul');">*</button> <button onclick="calcOp('div');">/</button> <br> <br> <div id="result"><label>Result: </label><output id="output1x"></output></div>

我將您的add function 更改為calcOp因為所有操作都非常相似，但如果您只想add ：

function add() {
    getInputAsNumber();
    let summe = operator1 + operator2;
    writeResult(summe);
}

[此外，正如其中提到的評論之一，如果您按照您的方式將其包裝為一種form ，它可能會在任何操作后消失。 只是div看起來一樣，不會消失]