足し算アプリ
数値を入力して「計算」ボタンを押してください。
結果: –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>足し算アプリ（洗練されたプログラム）</title>
</head>
<body>
<h1>足し算アプリ</h1>
<p>数値を入力して「計算」ボタンを押してください。</p>
<div id="input-container">
<input type="number" placeholder="数値1">
<input type="number" placeholder="数値2">
<input type="number" placeholder="数値3">
<input type="number" placeholder="数値4">
<input type="number" placeholder="数値5">
</div>
<button onclick="calculate()">計算</button>
<h2>結果: <span id="result">-</span></h2>
<script>
function calculate() {
// 全ての入力フィールドを取得
const inputs = document.querySelectorAll('#input-container input');
// 入力値を配列として取得し、合計を計算
const sum = Array.from(inputs).reduce((total, input) => {
return total + (parseFloat(input.value) || 0);
}, 0);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>
