入力したものを計算させるだけの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>