Web超簡易電卓 HTML＋JavaScript 乱数発生で計算など #JavaScript

ページ画面

機能
・「計算する」ボタンを押すと、確認ダイアログが表示
・確認ダイアログでＯＫを押すと、答えとともに、画面上のテーブルに追加表示
・空文字または数字以外を入力すると、赤いエラーメッセージを表示
・「乱数生成」ボタンを押すと、3つ自動的に入力
・リセットボタン

ソースファイル

そもそもとしては、値はどうすれば取得できるのか、というのがスタートでした。


<html>
<head>
<title>Web超簡易電卓　四則計算　確認ダイアログ＋出力テーブル</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function OnButtonClick(s) {

    //nullやundefinedではなく""で判定
    if (document.getElementById("arg1").value == "" || document.getElementById("arg2").value == "" || document.getElementById("arg3").value == ""){
        console.log("空文字です");
        document.getElementById("errormessage1").innerText = "値を入力して下さい";
        document.getElementById("errormessage2").innerText = "";
    }else if (isNaN(document.getElementById("arg1").value) || isNaN(document.getElementById("arg2").value)  || isNaN(document.getElementById("arg3").value )){
        console.log("Not a Number");
        document.getElementById("errormessage1").innerText = ""
        document.getElementById("errormessage2").innerText = "数字を入力して下さい";
    }else{
        document.getElementById("errormessage1").innerText = "";
        document.getElementById("errormessage2").innerText = "";
        //確認ダイアログ
        if(window.confirm("計算しますか？")){

            //要素のvalueを取得して型変換
            var num1 = parseInt(document.getElementById("arg1").value);
            var num2 = parseInt(document.getElementById("arg2").value);
            var num3 = parseInt(document.getElementById("arg3").value);

            switch(document.myform.operator.value){
            //  (document.getElementById(s).value)でも可
                case "1":
                    var result = num1 + num2 + num3;
                    //開始タグと終了タグの間の文字列を書換え
                    document.getElementById("output").textContent = result;
                    console.log(result);
                    Output(num1,num2,num3,"＋",result);
                    break;
                case "2":
                    var result = num1 - num2 - num3;
                    document.getElementById("output").textContent = result;
                    console.log(result);
                    Output(num1,num2,num3,"－",result);
                    break;
                case "3":
                    var result = num1 * num2 * num3;
                    document.getElementById("output").innerHTML = result;
                    console.log(result);
                    Output(num1,num2,num3,"＊",result);
                    break;
                case "4":
                    var result = num1 / num2 / num3;
                    document.getElementById("output").innerText = result;
                    console.log(result);
                    Output(num1,num2,num3,"／",result);
                    break;
            }
            //計算後、テキストボックスの値をクリア
//          document.getElementById("sampleform").reset();
            return true;
        }else {
            return false;
        }
    }
}

function Output(num1,num2,num3,ope,result){
    document.getElementById("ope1").innerHTML = ope;
    document.getElementById("ope2").innerHTML = ope;

    var table = document.getElementById("outputtable");
    // 行を行末に追加
    var row = table.insertRow(-1);
    // セルの挿入
    var cell1 = row.insertCell(-1);
    var cell2 = row.insertCell(-1);
    var cell3 = row.insertCell(-1);
    var cell4 = row.insertCell(-1);
    var cell5 = row.insertCell(-1);
    var cell6 = row.insertCell(-1);
    // セルの内容入力
    cell1.innerHTML = num1;
    cell2.innerHTML = num2;
    cell3.innerHTML = num3;
    cell4.innerHTML = ope;
    cell5.innerHTML = "="
    cell6.innerHTML = result;
}

function RandomButtonClick(){
    document.getElementById("arg1").value=Math.floor( Math.random() * 101 ) ;
    document.getElementById("arg2").value=Math.floor( Math.random() * 101 ) ;
    document.getElementById("arg3").value=Math.floor( Math.random() * 101 ) ;
}
</script>

<style>
    .warning{
    color:red;
    font-weight:bold;
    }
</style>

</head>
<body  bgcolor="lightskyblue">

<h1>Web超簡易電卓　四則計算　確認ダイアログ＋出力テーブル</h1>

<form name="myform" method="get" id="sampleform">
    <input type="text"  id="arg1" placeholder="数字入力" />
    <span id="ope1"></span>
    <input type="text"  id="arg2" placeholder="数字入力" />
    <span id="ope2"></span>
    <input type="text"  id="arg3" placeholder="数字入力" />
    <span>=</span>
    <span id = "output">結果</span>

<p>operatorを選択してください</p>
<select name="operator" id="s">
    <option value="1" id="calculation">足し算する</option>
    <option value="2" id="calculation">引き算する</option>
    <option value="3" id="calculation">掛け算する</option>
    <option value="4" id="calculation">割り算する</option>
</select>

    <input type="button" value="計算する" onclick="return OnButtonClick('s');"/>

    <input type="reset" value="リセット" />

    <input type="button" value="乱数生成" onclick="RandomButtonClick();"/>
</form>

<p id="errormessage1" class="warning"></p>

<p id="errormessage2" class="warning"></p>

<table border="1" id="outputtable">
    <tr>
        <th>Number1</th>
        <th>Number2</th>
        <th>Number3</th>
        <th>加減乗除</th>
        <th>=</th>
        <th>結果</th>
    </tr>
</table>

</body>
</html>

個人的なメモに近いこと

■条件分岐で
if (document.getElementById("calculation").innerHTML == "足し算する")
という書き方では足し算にしかならず。

■onclick="return OnButtonClick('s');"
1、returnは書かなくても動作したが、書いた方が適切だと思われ。
2、's' ではなく "s"だとエラーになりました。

■Math.floor() 関数
引数 x の切り捨てた値（整数値）を返します。