以前電卓をアップしましたが、その亜流です。演算子を選択して処理します。
Let's start JavaScript 13 ビジュアルも拘って電卓作成 2023/07/25
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>表の四則演算</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: lightgray;
}
table {
width: 50%;
border-collapse: collapse;
margin: 0 auto;
background-color: whitesmoke;
}
th, td {
border: 1px solid #ccc;
text-align: center;
padding: 10px;
}
input {
width: 60px;
text-align: right;
}
.result {
font-weight: bold;
}
</style>
</head>
<body>
<h1 style="text-align: center;">表の四則演算</h1>
<table>
<thead>
<tr>
<th>数値1</th>
<th>演算子</th>
<th>数値2</th>
<th>結果</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 数値1と数値2を入力するに
<input type="number"> を使用 -->
<td><input type="number" id="num1" value="0"></td>
<td>
<!-- <select> で、+, -, *, / を選択可能 -->
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
</td>
<td><input type="number"
id="num2" value="0"></td>
<td class="result" id="result">0</td>
</tr>
</tbody>
</table>
<div style="text-align: center; margin-top: 20px;">
<button onclick="calculate()">計算する</button>
</div>
<script>
function calculate() {
// 入力値を取得
const num1 =
parseFloat(document.getElementById('num1').value);
const num2 =
parseFloat(document.getElementById('num2').value);
const operator =
document.getElementById('operator').value;
let result;
// 四則演算を実行
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 !== 0) {
result = num1 / num2;
} else {
result = 'エラー (0で割ることはできません)';
}
break;
default:
result = '不正な演算子';
}
// 結果を表示
document.getElementById('result').textContent = result;
}
</script>
</body>
</html>
表示直後の状態。
数値を入力して演算子を「＋」として［計算する］をクリックした結果。
数値を入力して演算子を「−」として［計算する］をクリックした結果。
数値を入力して演算子を「×」として［計算する］をクリックした結果。
数値を入力して演算子を「÷」として［計算する］をクリックした結果。
