足し算アプリ
数値を入力して「計算」ボタンを押してください。
結果: –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>足し算アプリ（for文バージョン）</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');
let sum = 0;
// for文で合計を計算
for (let i = 0; i < inputs.length; i++) {
sum += parseFloat(inputs[i].value) || 0; // 空欄は0として扱う
}
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>
