足し算以外もできるようにする

計算の処理は？

あとは、「Calculate」ボタンがクリックされたら、計算の処理を呼び出すだけです。 この例でサポートするのは：

• 足し算「+」
• 引き算「-」
• 掛け算「*」
• 割り算「/」 の四つの演算です。

これを、選択されている演算子に応じて違うデータ処理を呼び出します。

function calculateEvent() {
  // Clears the output field
  resultField.value = "";
  const ope0 = parseInt(inputField0.value);
  const ope1 = parseInt(inputField1.value);
  let result = NaN;
  if (isNaN(ope0) || isNaN(ope1)) {
    alert("数値が入力されていません！");
  } else {
    switch (operator) {
      case "+":
        result = add(ope0, ope1);
        break;
      case "-":
        result = sub(ope0, ope1);
        break;
      case "*":
        result = mul(ope0, ope1);
        break;
      case "/":
        try {
          result = div(ope0, ope1);
        } catch {
          alert("Error: Divide by zero");
        }
        break;
      default:
        console.log("Unepected operator!");
        break;
    }
    resultField.value = result;
  }
}

Javascript の「switch 文」を使えば簡単に実現できます。 選択肢は、「+」、「-」、「*」、「/」の四つです。それ以外の選択肢は「default」になりますが、今回はフォームでこの四つ以外状態が選択される場合がないので、特に処理を明記していません。ただ、想定外の選択がされた場合にデバッグを簡単にするため、想定外の選択が起きたことがわかるようにしておくと便利です。

default:
          console.log("Unepected operator!")
          break;

通常は、この部分が実行される事はありませんが、万が一これが実行された場合は、デバッグの重要な情報になります。 多くの場合、フォームに選択肢を追加したり、演算子の初期値が正しく設定されていないなどのバグが想定されます。

function add(a, b) {
  return a + b;
}
function sub(a, b) {
  return a - b;
}
function mul(a, b) {
  return a * b;
}
function div(a, b) {
  if (b === 0) {
    throw "Divide by zero";
  } else {
    return a / b;
  }
}

try {
  result = div(ope0, ope1);
} catch {
  alert("Error: Divide by zero");
}