Web超簡易電卓 HTML＋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 の切り捨てた値（整数値）を返します。