JavaScript 计算器 if 语句

Question

我正在尝试创建一个简单的 JavaScript 计算器，只有 4 个操作(+、-、* 和 /)。我创建了一个包含 4 个字段的 HTML 文件:

• 1号
• 2号
• 操作
• 回答

我还创建了一个包含 4 个函数的脚本文件(每个操作一个)，但我似乎无法弄清楚在哪里/如何添加我的 if 语句，以便调用适当的函数基于操作选择。

function sumValues() {
  var num1, num2, ans;

  num1 = Number(document.formcalc.num1.value);
  num2 = Number(document.formcalc.num2.value);
  ans = num1 + num2;
  document.formcalc.answer.value = ans;
}

function subValues() {
  var num1, num2, answer;

  num1 = Number(document.formcalc.num1.value);
  num2 = Number(document.formcalc.num2.value);
  ans = num1 - num2;
  document.formcalc.answer.value = ans;
}

function multiValue() {
  var num1, num2, ans;

  num1 = Number(document.formcalc.num1.value);
  num2 = Number(document.formcalc.num2.value);
  ans = num1 * num2;
  document.formcalc.answer.value = ans;
}

function divValue() {
  var num1, num2, ans;

  num1 = Number(document.formcalc.num1.value);
  num2 = Number(document.formcalc.num2.value);
  ans = num1 / num2;
  document.formcalc.answer.value = ans;
}

<h1>My Calculator</h1>
<form name="formcalc">
  Number 1: <input type="text" name="num1"><br>
  Number 2: <input type="text" name="num2"><br>
  Operation(+,-,*,/): <input type="text" name="selection"><br>
  Answer: <input type="text" name="answer"><br>
  <input type="button" value="calculate" onclick="divValue()">
</form>

Answer 1

除非此示例明确地帮助您了解如何使用函数，否则实际上不需要为每个操作提供完整的方法。

查看您的代码有多少重复，几乎完全相同 - 例如从 DOM 检索值并设置答案。这些代码实际上应该在整个程序中只出现一次。

实际上唯一不同的部分是操作本身 - 可以在简单的 switch 语句中进行分支。

function onCalculateClick() {
  const num1 = Number(document.getElementById('num1').value);
  const num2 = Number(document.getElementById('num2').value);
  const operation = document.getElementById('operation').value;

  let ans = "Invalid Operation";

  switch (operation) {
    case "+": ans = num1 + num2; break;
    case "-": ans = num1 - num2; break;
    case "*": ans = num1 * num2; break;
    case "/": ans = num1 / num2; break;
  }
  
  document.getElementById('answer').value = ans;
}

<h1>My Calculator</h1>
<form name="formcalc">
  Number 1: <input type="text" id="num1"><br />
  Number 2: <input type="text" id="num2"><br />
  Operation(+,-,*,/): <input type="text" id="operation"><br />
  Answer: <input type="text" id="answer"><br />
  <input type="button" value="calculate" onclick="onCalculateClick()">
</form>