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


[Web超簡易電卓 HTML＋JavaScript](https://qiita.com/circular/items/c42d035bc703f1505044)の発展形です。

##ページ画面
![FireShot Capture 4 - Web超簡易電卓　四則計算　確_ - file____Users_shinookakuken_Downloads_calcByJS_pulldown.html.png](https://qiita-image-store.s3.amazonaws.com/0/180727/b6e5931d-ffd2-b5a7-d488-968c8325e06d.png)

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

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

```html

<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 の切り捨てた値（整数値）を返します。