元祖若手のプログラミング奮闘記

元祖若手の奮闘記。主にメモ

入力したものを計算させるだけのJavaScript

そんなものを作ってみた!

<html>
<head>
  <title>山田がテストするってよ</title>
</head>
<body>
  <h1>Javascriptが計算しまーす</h1>
  <form name="omitsumori">
    <ul>
      <li>X: <input type="text" name="x" size="10" maxlength="10"></li>
      <li>Y: <input type="text" name="y" size="10" maxlength="10"></li>
      <li>Z: <input type="text" name="z" size="10" maxlength="10"></li>
      <li>計: <div id="capacity"></div></li>
    </ul>
  </form>

  <script type="text/javascript">
  <!--
    // window.onload => 最後に読み込む
    window.onload = function() {
      // onblur => 入力フォームからカーソルが離れたときに動くイベント
      document.omitsumori.x.onblur = function() { checkCapacityAndAdd(); }
      document.omitsumori.y.onblur = function() { checkCapacityAndAdd(); }
      document.omitsumori.z.onblur = function() { checkCapacityAndAdd(); }
    }

    function checkCapacityAndAdd() {
      // 成功 => 1以上, 失敗 => 0
      var add_capacity = addCapacity();

      // id="capacity"の中身を入れる
      var capacity = document.getElementById("capacity");
      if (add_capacity > 0) {
        capacity.innerText = add_capacity;
      } else {
        // 失敗なら空文字を入れる
        capacity.innerText = "";
      }
      
    }

    function addCapacity(){
      // form name="omitsumori"にすることで document.omitsumori と記述すれば連携する
      var omitsumori_form = document.omitsumori;

      // 取得できなかったら処理終了
      if (!omitsumori_form) return 0;

      // 各値を代入
      // parseInt => 良しなに整数に変える関数
      var capacity_list = [
        parseInt(omitsumori_form.x.value),
        parseInt(omitsumori_form.y.value),
        parseInt(omitsumori_form.z.value),
      ];

      for (var i in capacity_list) {
        // 存在しなければループ終了
        if (!capacity_list[i]) {
          return 0;
        }
      }

      // 全部かける
      var total_size = capacity_list[0] * capacity_list[1] * capacity_list[2];

      // TODO: 少数を切り上げる
      return total_size;
    }
  //-->
  </script>
</body>
</html>