本文介绍如何使用原生 javascript 和 css 类切换机制，实现点击多个按钮分别显示对应图形表单，并为每种图形提供独立的面积计算逻辑，避免冗余函数，提升代码可维护性。
在构建交互式表单时，常需根据用户选择动态展示不同内容模块（如“正方形”与“矩形”输入界面），并为其绑定专属计算逻辑。与其为每个按钮编写独立函数，更优雅的方式是：用 CSS 控制显隐 + 事件委托 + 精准 DOM 定位。
首先，为隐藏区域添加基础样式：
#square, #rectangle {
display: none;
}
#square.shown, #rectangle.shown {
display: block;
}接着，使用现代 JavaScript 实现解耦逻辑——无需 onclick 内联属性，统一通过 addEventListener 绑定事件：
// 工具函数：简化 querySelector 调用
const $ = (selector) => document.querySelector(selector);
// 按钮点击：切换对应区域可见性
$('#one1').addEventListener('click', () => $('#square').classList.toggle('shown'));
$('#one2').addEventListener('click', () => $('#rectangle').classList.toggle('shown'));
// 正方形计算：读取 #area 输入值，计算平方
$('#square button').addEventListener('click', () => {
const side = parseFloat($('#square #area').value) || 0;
if (isNaN(side) || side <= 0) {
alert('请输入有效的正方形边长');
return;
}
alert(`正方形面积为：${side ** 2}`);
});
// 矩形计算：读取 length 和 width，相乘得面积
$('#rectangle button').addEventListener('click', () => {
const len = parseFloat($('#rectangle #len').value) || 0;
const width = parseFloat($('#rectangle #width').value) || 0;
if (isNaN(len) || isNaN(width) || len <= 0 || width <= 0) {
alert('请输入有效的长和宽');
return;
}
alert(`矩形面积为：${len * width}`);
});⚠️ 注意事项：
- 原 HTML 中两个 共用 id="area"，违反 ID 唯一性规范，已修正为 #len / #width；
- 使用 parseFloat() 并配合 || 0 和 isNaN() 校验，防止空值或非法输入导致计算错误；
- 所有事件监听均基于当前可见区域内的按钮，天然隔离逻辑，无需全局函数名（如 aarea()），避免命名冲突与维护困难；
- 若后续扩展更多图形（如圆形、三角形），只需新增 HTML 结构、CSS 规则及对应事件监听，主逻辑无需修改。
这种模式兼顾简洁性与可扩展性，是前端交互开发中推荐的轻量级实践方案。
