JavaScript计算器if语句

时间：2019-02-09 21:52:26

标签： javascript

我正在尝试创建一个仅包含4个操作（+，-，*和/）的简单javascript计算器。我创建了一个包含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>

4 个答案:

答案 0 :(得分：2)

除非该示例明确地帮助您学习如何使用函数，否则实际上每个操作都不需要整个方法。

看看几乎重复了多少代码，例如从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>

答案 1 :(得分：0)

我会尽力给您一些指示，而不必为您哈哈完成学校的作业。

您缺少的是用一个新函数（您需要编写）来连接“计算”按钮，该函数基于“选择”运算符会将其“ switch”连接到正确的js函数（ divValue，multiValue）等

祝你好运

答案 2 :(得分：0)

您需要创建第五个函数（简称为calculate()），该函数会在单击按钮时被调用，并分派给正确的操作函数。使用if语句（根据您的问题）的样子如下：

function calculate() {
  var op = document.selection.value;

  if (op === '+') {
    sumValues();
  } else if (op === '-') {
    subValues();
  } else if (op === '*') {
    multiValue();
  } else if (op === '/') {
    divValue();
  } else {
    console.log('Invalid operation:', op);
  }
}

但是，遇到这样的分层if语句时，可以使用更好的构造； switch：

function calculate() {
  var op = document.selection.value;

  switch (op) {
    case '+':
      sumValues();
      break;

    case '-':
      subValues();
      break;

    case '*':
      multiValue();
      break;

    case '/':
      divValue();
      break;

    default:
      console.log('Invalid operation:', op);
  }
}

或更紧凑：

function calculate() {
  var op = document.selection.value;

  switch (op) {
    case '+': sumValues(); break;
    case '-': subValues(); break;
    case '*': multiValue(); break;
    case '/': divValue(); break;
    default: console.log('Invalid operation:', op);
  }
}

将其添加到您现有的代码中可以使我们：

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;
}

function calculate() {
  var op = document.selection.value;

  switch (op) {
    case '+': sumValues(); break;
    case '-': subValues(); break;
    case '*': multiValue(); break;
    case '/': divValue(); break;
    default: console.log('Invalid operation:', op);
  }
}
<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="calculate()">
</form>

关于代码的一些注意事项：

避免使用name属性

目前，它已被弃用。相反，请选择id属性：

<input type="text" id="operation">

function calculate() {
  var op = document.getElementById('operation').value;
  ...
}

保持函数名称一致

您有两个名称为Values的功能和两个带有Value的功能。选择一个并坚持下去，以后如果您错误地使用了错误的一个，将为您免除头痛。

避免重复代码

每个xxxValues()函数的大部分与其余函数相同。您可以通过重构将重复的代码提升为通用函数来简化代码：

function calculate() {
  var num1 = Number(document.getElementById('num1').value),
      num2 = Number(document.getElementById('num2').value),
      op = document.getElementById('operation').value;
      ans;

  switch (op) {
    case '+': ans = sumValues(num1, num2); break;
    case '-': ans = subValues(num1, num2); break;
    case '*': ans = multiValues(num1, num2); break;
    case '/': ans = divValues(num1, num2); break;
    default: console.log('Invalid operation:', op);
  }

  document.getElementById('answer').value = ans;
}

现在，您的xxxValues()函数只能是一行，例如：

function sumValues(num1, num2) {
  return num1 + num2;
}

尽管功能如此简单，但实际上根本不需要它们是单独的功能，因此我们可以内联它们：

function calculate() {
  var num1 = Number(document.getElementById('num1').value),
      num2 = Number(document.getElementById('num2').value),
      op = document.getElementById('operation').value;
      ans;

  switch (op) {
    case '+': ans = num1 + num2; break;
    case '-': ans = num1 - num2; break;
    case '*': ans = num1 * num2; break;
    case '/': ans = num1 / num2; break;
    default: console.log('Invalid operation:', op);
  }

  document.getElementById('answer').value = ans;
}

下面是代码的外观：

function calculate() {
  var num1 = Number(document.getElementById('num1').value),
      num2 = Number(document.getElementById('num2').value),
      op = document.getElementById('operation').value;
      ans;

  switch (op) {
    case '+': ans = num1 + num2; break;
    case '-': ans = num1 - num2; break;
    case '*': ans = num1 * num2; break;
    case '/': ans = num1 / num2; break;
    default: console.log('Invalid operation:', op);
  }

  document.getElementById('answer').value = ans;
}
<h1>My Calculator</h1>
<form id="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="calculate()">
</form>

最后，如果您觉得事情太过遥远

const calculatorFuncs = {
  '+': (n1, n2) => n1 + n2,
  '-': (n1, n2) => n1 - n2,
  '*': (n1, n2) => n1 * n2,
  '/': (n1, n2) => n1 / n2
}

function calculate() {
  const op = document.getElementById('operation').value;

  if (!'+-*/'.split('').includes(op)) {
    console.log('Invalid operation:', op);
    return;
  }

  document.getElementById('answer').value = calculatorFuncs[op](...([...Array(2).keys()].map(n => document.getElementById(`num${++n}`).value)));
}

我将其保留为OP的练习，以了解此处发生的情况;）

答案 3 :(得分：0)

您只需添加另一个函数即可选择要调用的操作。

示例：

function selectOperation(){

    var selection = document.formcalc.selection.value;
    switch(selection[0]) {
      case '+':
        sumValues();
        break;
      case '-':
        subValues();
        break;
      case '*':
        multiValue();
        break;
      case '/':
        divValue();
        break;
      default:
        // Prompt something if input is wrong
    } 
}

然后在输入中调用此函数：

<input type="button" value="calculate" onclick="selectOperation()">

我刚刚在这里尝试过，并且运行良好！ 让我知道

相关问题
最新问题