如何通过按钮点击动态显示并计算不同图形区域内容

花韻仙語 2026-01-06 00:00:00 次阅读

本文介绍如何使用原生 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}`);
});

⚠️ 注意事项：