带有JavaScript中某些按钮的计算器

Question

我想用JS制作一个计算器。我是JS的新手，我不明白为什么它不起作用。在浏览器控制台中，如果我调用add((，我会得到未定义的结果
getInputAsNumber(…(应该从ID作为Parameter传递的字段中检索输入值writeResult((将计算结果写入输出字段，并用于的所有操作

"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作为引用参数传递，但它们实际上是由值调用的(这意味着在函数内部更改时不会更改(。由于运算符1和运算符2仅被声明(未初始化！(，因此未定义。

您可以修改您的函数，使其返回两个运算符(而不是传递它们(：

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>

此函数返回一个由运算符1和2组成的对象，使用对象展开(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函数改成了calcOp，因为所有的操作都非常相似，但如果你只想有add:

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

[此外，正如其中一条评论所提到的，如果你像以前那样把它包装成form，它很可能在任何操作后都会消失。只有div看起来一样，不会消失]