本文介绍如何使用原生 javascript 和 css 类切换，实现点击不同按钮显示对应图形区域，并分别计算正方形与长方形面积，避免冗余函数，提升代码可维护性。
在前端交互开发中，常需根据用户操作（如点击按钮）动态展示不同内容区块，并执行对应的逻辑处理。本例中，两个按钮分别控制「正方形」和「长方形」表单区域的显隐，并支持独立的面积计算——关键在于解耦显示逻辑与计算逻辑，而非为每个按钮绑定独立的 onclick 函数或重复定义全局计算方法。
✅ 推荐实现方式：事件委托 + CSS 类控制显隐
首先，为隐藏区域设置默认 display: none，再通过添加 .shown 类激活显示：
#square, #rectangle {
display: none;
}
#square.shown, #rectangle.shown {
display: block;
}接着，使用现代 JavaScript 为按钮绑定事件监听器，推荐封装一个简洁的 get() 工具函数提升可读性：
const get = queryStr => document.querySelector(queryStr);
// 切换显示区域
get("#one1").addEventListener("click", () => {
get("#square").classList.toggle("shown");
});
get("#one2").addEventListener("click", () => {
get("#rectangle").classList.toggle("shown");
});? 提示：toggle() 可自动切换显隐状态，支持多次点击反复展开/收起；若需“单选互斥”效果（即点一个时关闭另一个），可改用 remove() + add() 组合。
✅ 独立计算逻辑：按上下文精准获取输入值
每个区域内的「Calculate」按钮应只读取其所在容器内的输入框，避免 ID 冲突（注意：原 HTML 中两个 均为 id="area"，这违反 HTML 唯一性规范，必须修正）：
✅ 正确做法：
- 正方形区域使用 id="side" 表示边长；
- 长方形区域使用 id="len" 和 id="width"；
- 计算按钮不再依赖内联 onclick，而是通过事件监听器绑定，确保作用域清晰。
// 正方形面积计算（边长²）
get("#square button").addEventListener("click", () => {
const sideInput = get("#square #side");
const side = parseFloat(sideInput.value) || 0;
if (isNaN(side) || side <= 0) {
alert("请输入有效的正数边长！");
return;
}
alert(`正方形面积：${side ** 2}`);
});
// 长方形面积计算（长 × 宽）
get("#rectangle button").addEventListener("click", () => {
const lenInput = get("#rectangle #len");
const widthInput = get("#rectangle #width");
const len = parseFloat(lenInput.value) || 0;
const width = parseFloat(widthInput.value) || 0;
if (isNaN(len) || isNaN(width) || len <= 0 || width <= 0) {
alert("请输入有效的正数长和宽！");
return;
}
alert(`长方形面积：${len * width}`);
});对应更新后的 HTML 片段（修复 ID 重复、补充语义化标签）：
<div id="square"> <h3>正方形</h3> @@##@@ 边长：<input id="side" type="number" placeholder="请输入边长" /> <button>计算面积</button> </div> <div id="rectangle"> <h3>长方形</h3> @@##@@ 长：<input id="len" type="number" placeholder="请输入长度" /> 宽：<input id="width" type="number" placeholder="请输入宽度" /> <button>计算面积</button> </div>
⚠️ 注意事项与最佳实践
- ID 唯一性：HTML 中 id 必须全局唯一，重复 ID 将导致 document.getElementById 或 querySelector 行为不可预测；
- 输入校验：始终对 parseFloat() 结果做 isNaN() 和数值范围检查，防止 NaN 或负数参与运算；
- 可访问性增强：可为按钮添加 aria-expanded 属性，配合屏幕阅读器提示当前状态；
- 扩展性考虑：若后续新增三角形、圆形等图形，只需复制结构 + 新增对应事件监听器，无需修改现有逻辑。
通过这种结构清晰、职责分离的方式，你既能灵活控制多组内容的显示/隐藏，又能为每类表单定制专属计算逻辑，真正实现「一处定义、多处复用」的高质量前端实践。
