本文介绍如何使用原生 javascript 和 css 类切换，实现点击不同按钮分别显示对应的内容区域（如正方形、长方形表单），并为每个区域绑定独立的面积计算逻辑，避免函数耦合与 id 冲突。

在构建交互式表单界面时，常需根据用户操作（如点击按钮）动态展示不同模块内容，并对各模块执行专属逻辑（如面积计算）。本方案摒弃内联 onclick 和全局函数调用，采用现代 DOM 操作 + 事件委托 + CSS 控制显隐，提升可维护性与扩展性。

✅ 核心思路

• 使用 display: none/block 配合 CSS 类（如 .shown）控制区块显隐；
• 通过 addEventListener 为按钮绑定事件，解耦 HTML 与 JS；
• 利用 document.querySelector 精准定位目标元素，避免 ID 重复导致的冲突（例如原代码中两个 会引发取值错误）；
• 每个计算逻辑独立作用于其所属容器，确保数据隔离。

?️ 完整实现代码

HTML 结构（精简优化版）：

  
Shapes
  Square
  Rectangle



  
Square
  @@##@@
  Square side length: 
  Calculate Area



  
Rectangle
  @@##@@
  Length: 
  Width: 
  Calculate Area

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 操作，也适用于中小型项目快速落地交互需求。