電卓の作成 #JavaScript

電卓を作成します

足し算と引き算と掛け算と割り算ができる電卓を作ります。

body要素にinput要素を2つ記述します。input要素に計算するときの数値を記入します。select要素を1つ記述しますが、ここで足し算をするか引き算をするかなどを選択します。button要素をクリックするとinput要素とselect要素で指定した内容で計算してくれます。button要素にはonclick属性を設定してクリックしたときにclicked( )関数が発火します。

<body>
  <input id="num1">
  <select id="s1">
    <option>+</option>
    <option>-</option>
    <option>×</option>
    <option>÷</option>
  </select>
  <input id="num2">
  <span>=</span>
  <span id="total"></span><br>
  <p>※半角数字を入力してください</p>
  <button onclick="clicked()">計算する</button>
</body>

script要素ではグローバル変数にnum1,num2,s1,totalを定義します。
clicked関数の最初にグローバル変数それぞれにbody要素側で取得したい要素を設定します。num1とnum2は計算するときの数値。s1は足し算、引き算などの計算方法。totalは計算結果を表示します。
「let t = 0;」は関数内での計算結果を後で代入します。
num1,num2,s1は「document.getElementById("id名")」の最後に「.value」をつけていますが、input要素やselect要素で記入したり選択した内容を変数に代入することができます。

parseInt( )メソッドは引数に指定した値を数値に変換することができます。先ほどのnum1やnum2が取得している値は文字列として数字が代入されているので、数値に変換します。この後計算するためです。

switch構文は引数に指定しているものの値が「case」後の値ごとに処理を分岐できる構文です。例えば、s1 = "+"のときは「t = num1 + num2; break;」を実行します。"+"のときは足し算、"-"のときは引き算をするように分岐しています。

最後に「total.textContent = t;」で計算後の値tをtextContentを使ってid要素totalを持つspan要素に出力しています。

  <script>
    let num1, num2, s1, total;

    function clicked() {
      num1 = document.getElementById("num1").value;
      num2 = document.getElementById("num2").value;
      s1 = document.getElementById("s1").value;
      total = document.getElementById("total");
      let t = 0;

      num1 = parseInt(num1);
      num2 = parseInt(num2);

      switch(s1) {
        case "+":
          t = num1 + num2;
          break;
        case "-":
          t = num1 - num2;
          break;
        case "×":
          t = num1 * num2;
          break;
        case "÷":
          t = num1 / num2;
          break;
      }
      total.textContent = t;
    }
  </script>

以下のコードをコピーしてファイルに貼り付ければ試せます。select要素のoptionとswitch構文内のcaseを増やせばさらに計算方法を増やすこともできるので試してみてください。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>calculater</title>

  <style>
    input {
      width: 100px;
      height: 30px;
      font-size: 25px;
      margin-right: 10px;
    }

    select {
      width: 50px;
      height: 30px;
      font-size: 25px;
      background-color: #eeeeee;
      margin-right: 10px;
    }

    span {
      width: 30px;
      height: 30px;
      font-size: 25px;
      margin-right: 10px;
    }
  </style>

  <script>
    let num1, num2, s1, total;

    function clicked() {
      num1 = document.getElementById("num1").value;
      num2 = document.getElementById("num2").value;
      s1 = document.getElementById("s1").value;
      total = document.getElementById("total");
      let t = 0;

      num1 = parseInt(num1);
      num2 = parseInt(num2);

      switch(s1) {
        case "+":
          t = num1 + num2;
          break;
        case "-":
          t = num1 - num2;
          break;
        case "×":
          t = num1 * num2;
          break;
        case "÷":
          t = num1 / num2;
          break;
      }
      total.textContent = t;
    }
  </script>
</head>

<body>
  <input id="num1">
  <select id="s1">
    <option>+</option>
    <option>-</option>
    <option>×</option>
    <option>÷</option>
  </select>
  <input id="num2">
  <span>=</span>
  <span id="total"></span><br>
  <p>※半角数字を入力してください</p>
  <button onclick="clicked()">計算する</button>
</body>
</html>