本文介绍如何使用原生 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 操作，也适用于中小型项目快速落地交互需求。