本文介绍如何使用原生 javascript 和 css 类切换，实现点击不同按钮分别显示对应的内容区域（如正方形、长方形表单），并为每个区域绑定独立的面积计算逻辑，避免函数耦合与 id 冲突。
在构建交互式表单界面时，常需根据用户操作（如点击按钮）动态展示不同模块内容，并对各模块执行专属逻辑（如面积计算）。本方案摒弃内联 onclick 和全局函数调用，采用现代 DOM 操作 + 事件委托 + CSS 控制显隐，提升可维护性与扩展性。
✅ 核心思路
- 使用 display: none/block 配合 CSS 类（如 .shown）控制区块显隐；
- 通过 addEventListener 为按钮绑定事件，解耦 HTML 与 JS；
- 利用 document.querySelector 精准定位目标元素，避免 ID 重复导致的冲突（例如原代码中两个 <input id="area"> 会引发取值错误）；
- 每个计算逻辑独立作用于其所属容器，确保数据隔离。
?️ 完整实现代码
HTML 结构（精简优化版）：
<div> <h1 id="one">Shapes</h1> <button id="one1">Square</button> <button id="one2">Rectangle</button> </div> <div id="square"> <h3>Square</h3> <img src="" alt="Square diagram" height="80" width="80" /> Square side length: <input id="side" type="number" placeholder="e.g., 5"> <button>Calculate Area</button> </div> <div id="rectangle"> <h3>Rectangle</h3> <img src="" alt="Rectangle diagram" height="60" width="120" /> Length: <input id="len" type="number" placeholder="e.g., 4"> Width: <input id="width" type="number" placeholder="e.g., 7"> <button>Calculate Area</button> </div>
CSS 样式（控制初始隐藏与显隐切换）：
#square, #rectangle {
display: none;
margin-top: 1rem;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
#square.shown, #rectangle.shown {
display: block;
}JavaScript 逻辑（模块化、无全局污染）：
// 工具函数：简化 querySelector 调用
const $ = (selector) => document.querySelector(selector);
// 按钮点击显示对应区域
$('#one1').addEventListener('click', () => $('#square').classList.toggle('shown'));
$('#one2').addEventListener('click', () => $('#rectangle').classList.toggle('shown'));
// 正方形计算逻辑（仅作用于 #square 内部）
$('#square button').addEventListener('click', () => {
const sideInput = $('#square #side');
const side = parseFloat(sideInput.value);
if (isNaN(side) || side <= 0) {
alert('Please enter a valid positive number for side length.');
return;
}
alert(`Area of square: ${side ** 2}`);
});
// 长方形计算逻辑（仅作用于 #rectangle 内部）
$('#rectangle button').addEventListener('click', () => {
const lenInput = $('#rectangle #len');
const widthInput = $('#rectangle #width');
const len = parseFloat(lenInput.value);
const width = parseFloat(widthInput.value);
if (isNaN(len) || isNaN(width) || len <= 0 || width <= 0) {
alert('Please enter valid positive numbers for length and width.');
return;
}
alert(`Area of rectangle: ${len * width}`);
});⚠️ 注意事项与最佳实践
- ID 唯一性必须保证：原代码中重复使用 id="area" 会导致 document.getElementById('area') 总是返回第一个匹配项，务必为每个输入框设置唯一 ID（如 #side、#len、#width）；
- 输入校验不可省略：示例中已加入基础数值验证（isNaN 与正数判断），生产环境建议进一步支持空值提示、小数精度控制等；
- 避免内联事件处理器：移除 HTML 中的 onclick="aarea()"，改用 addEventListener，便于调试、复用与测试；
- 扩展性提示：若后续新增三角形、圆形等形状，只需复制对应 HTML 结构，添加新按钮监听器及独立计算逻辑，无需修改现有代码。
该方案简洁、健壮、符合现代前端开发规范，适合初学者理解事件流与 DOM 操作，也适用于中小型项目快速落地交互需求。
