本文介绍如何使用原生 javascript 和 css 类切换机制，实现点击多个按钮分别显示对应图形表单，并为每种图形提供独立的面积计算逻辑，避免冗余函数，提升代码可维护性。

在构建交互式表单时，常需根据用户选择动态展示不同内容模块（如“正方形”与“矩形”输入界面），并为其绑定专属计算逻辑。与其为每个按钮编写独立函数，更优雅的方式是：用 CSS 控制显隐 + 事件委托 + 精准 DOM 定位。

首先，为隐藏区域添加基础样式：

#square, #rectangle {
  display: none;
}
#square.shown, #rectangle.shown {
  display: block;
}

接着，使用现代 JavaScript 实现解耦逻辑——无需 onclick 内联属性，统一通过 addEventListener 绑定事件：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

// 工具函数：简化 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 中两个 <input> 共用 id="area"，违反 ID 唯一性规范，已修正为 #len / #width；
• 使用 parseFloat() 并配合 || 0 和 isNaN() 校验，防止空值或非法输入导致计算错误；
• 所有事件监听均基于当前可见区域内的按钮，天然隔离逻辑，无需全局函数名（如 aarea()），避免命名冲突与维护困难；
• 若后续扩展更多图形（如圆形、三角形），只需新增 HTML 结构、CSS 规则及对应事件监听，主逻辑无需修改。

这种模式兼顾简洁性与可扩展性，是前端交互开发中推荐的轻量级实践方案。