ベタに四則演算電卓を作成して見ました。電卓のボタンは表組みです。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<table>
<tr>
<td colspan="4"><input id="result" disabled></td>
</tr>
<tr>
<td><button onclick="appendValue('1')">１</button></td>
<td><button onclick="appendValue('2')">２</button></td>
<td><button onclick="appendValue('3')">３</button></td>
<td><button onclick="appendValue('+')">＋</button></td>
</tr>
<!-- 1〜3がクリックの場合、それぞれの数値に置き換える
＋（加法）がクリックの場合、演算子を＋に置き換える -->
<tr>
<td><button onclick="appendValue('4')">４</button></td>
<td><button onclick="appendValue('5')">５</button></td>
<td><button onclick="appendValue('6')">６</button></td>
<td><button onclick="appendValue('-')">ー</button></td>
</tr>
<!-- 4〜6がクリックの場合、それぞれの数値に置き換える
−（減法）がクリックの場合、演算子を−に置き換える -->
<tr>
<td><button onclick="appendValue('7')">７</button></td>
<td><button onclick="appendValue('8')">８</button></td>
<td><button onclick="appendValue('9')">９</button></td>
<td><button onclick="appendValue('*')">＊</button></td>
</tr>
<!-- 7〜9がクリックの場合、それぞれの数値に置き換える
＊（乗法）がクリックの場合、演算子を＊に置き換える -->
<tr>
<td><button onclick="appendValue('0')">０</button></td>
<td><button onclick="clearValue()">Ｃ</button></td>
<td><button onclick="calculate()">＝</button></td>
<td><button onclick="appendValue('/')">／</button></td>
</tr>
</table>
<!-- 0がクリックの場合、それぞれの数値に置き換える
C（クリア）がクリックの場合、値をすべて消去する
＝（イコール）がクリックの場合、式を確認し、演算
／（除法）がクリックの場合、演算子を／に置き換える -->
<script src="links/action.js"></script>
</body>
</html>
<!-- index.html -->
/* action.js */
function appendValue(value) {
document.getElementById("result").value += value;
/* 加算代入
document.getElementById("result") は、JavaScriptにおいて指定したID属性のHTML要素を取得するためのメソッドです。加算代入演算子 (+=) は、右の値を変数に加算し、結果を変数に代入。*/}
function clearValue() {
document.getElementById("result").value = "";
/* クリア
入力画面をクリア（空）にする*/
}
function calculate() {
var expression = document.getElementById("result").value;
var result = eval(expression);
document.getElementById("result").value = result;
/* 計算
キー入力に従い計算を行う */
}
/* action.js */
このコードでは、<table>タグを使用して電卓のボタンを配置しています。それぞれのボタンには、onclick属性を設定してJavaScript関数を呼び出し、入力された値を表示します。四則演算の計算を行うために、eval()関数を利用して式を評価し、その値を返します。 たとえば、Eval("2×3") ならば6を返します。/* rule.css */
@charset "UTF-8";
html, body {
height: 100%;
}
html {
overflow-y:scroll;
font-size: 16px;
}
body *, ::before, ::after {
box-sizing: border-box;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
}
body {
background-color: gainsboro;
font-family: Arial, sans-serif;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: collapse;
margin: 60px auto;
}
td {
background-color: dimgray;
padding: 15px;
border: 1px solid whitesmoke;
border-radius: 10px;
}
input {
background-color: palegreen;
width: 100%;
height: 40px;
padding: 5px;
box-sizing: border-box;
font-weight: Bold;
font-size: 18px;
text-align:right;
}
/* rule.css */
以下は実行例・・・
加算 12+3=15
減算 12-3=9
乗算 12*3=36
除算 12/3=4
