HTML上で正円、長方形、三角形の面積を計算してみます。
<!-- index.html -->
<!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;
text-align: center;
margin: 20px;
color: #000;
background-color: #f5f5f5;
}
.container {
margin: 20px auto;
max-width: 300px;
text-align: left;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="number"] {
width: 100%;
padding: 5px;
margin-bottom: 15px;
font-size: 1rem;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 1rem;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.result {
margin-top: 20px;
font-size: 1.2rem;
color: #2c3e50;
text-align: center;
}
</style>
</head>
<body>
<h2>図形の面積を計算</h2>
<div class="container">
<label for="shape">図形を選択:</label>
<select id="shape" onchange="updateInputs()">
<option value="circle">正 円</option>
<option value="rectangle">長方形</option>
<option value="triangle">三角形</option>
</select>
<div id="inputs">
<!-- 入力フィールドがここに動的に生成されます -->
</div>
<button onclick="calculateArea()">面積を計算</button>
<div class="result" id="result"></div>
</div>
<script>
function updateInputs() {
const shape = document.getElementById("shape").value;
const inputs = document.getElementById("inputs");
// 入力フィールドをリセット
inputs.innerHTML = "";
// 正円に応じた入力フィールドを生成
if (shape === "circle") {
inputs.innerHTML = `
<label for="radius">半径 (r):</label>
<input type="number" id="radius"
placeholder="半径を入力" min="0" required>
`;
// 長方形に応じた入力フィールドを生成
} else if (shape === "rectangle") {
inputs.innerHTML = `
<label for="width">幅 (w):</label>
<input type="number" id="width"
placeholder="幅を入力" min="0" required>
<label for="height">高さ (h):</label>
<input type="number" id="height"
placeholder="高さを入力" min="0" required>
`;
// 三角形に応じた入力フィールドを生成
} else if (shape === "triangle") {
inputs.innerHTML = `
<label for="base">底辺 (b):</label>
<input type="number" id="base"
placeholder="底辺を入力" min="0" required>
<label for="height">高さ (h):</label>
<input type="number" id="height"
placeholder="高さを入力" min="0" required>
`;
}
}
function calculateArea() {
const shape = document.getElementById("shape").value;
let area = 0;
//正円の処理（半径×半径×3.14）
if (shape === "circle") {
const radius = document.getElementById("radius").value;
if (radius) {
area = Math.PI * Math.pow(radius, 2);
}
//長方形の処理（高さ×幅）
} else if (shape === "rectangle") {
const width = document.getElementById("width").value;
const height = document.getElementById("height").value;
if (width && height) {
area = width * height;
}
//三角形の処理（底辺×高さ÷2）
} else if (shape === "triangle") {
const base = document.getElementById("base").value;
const height = document.getElementById("height").value;
if (base && height) {
area = (base * height) / 2;
}
}
//結果表示
const result = document.getElementById("result");
if (area > 0) {
result.textContent = `面積: ${area.toFixed(2)} 平方単位`;
} else {
result.textContent = "正しい値を入力してください。";
}
}
// 初期状態で円の入力フィールドを表示
window.onload = updateInputs;
</script>
</body>
</html>
<!-- index.html -->
実行直後の画面です。
半径を入力して［面積を計算］で正円の面積が出ます。
［長方形］を選択して幅と高さを入力し［面積を計算］で長方形の面積が出ます。
［三角形］を選択して底辺と高さを入力し［面積を計算］で三角形の面積が出ます。
