如何复用计算平方的函数，在多文本框输出对应结果？

我来帮你搞定这个问题！你遇到的情况大概率是因为DOM选择器只选中了第一个元素，或者事件绑定没覆盖到所有目标元素。咱们可以通过复用同一个计算函数+批量绑定事件的方式解决，具体看下面的完整示例：

第一步：HTML结构（避免重复ID，用类名统一管理） #

<div class="calc-group">
  <label>数值a：</label>
  <input type="number" class="input-number" placeholder="输入整数">
  <label>平方结果：</label>
  <input type="text" class="result-number" readonly>
</div>
<div class="calc-group">
  <label>数值b：</label>
  <input type="number" class="input-number" placeholder="输入整数">
  <label>平方结果：</label>
  <input type="text" class="result-number" readonly>
</div>
<!-- 可以继续添加更多calc-group，函数能自动适配 -->

第二步：复用的平方计算函数+事件绑定 #

// 通用的计算平方函数
function calculateSquare(inputEl, resultEl) {
  const value = parseFloat(inputEl.value);
  if (!isNaN(value)) {
    resultEl.value = value * value;
  } else {
    resultEl.value = ''; // 输入非数字时清空结果
  }
}

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有计算组
  const calcGroups = document.querySelectorAll('.calc-group');
  
  // 遍历每个组，给输入框绑定事件
  calcGroups.forEach(group => {
    const inputEl = group.querySelector('.input-number');
    const resultEl = group.querySelector('.result-number');
    
    // 绑定input事件（输入时实时计算）
    inputEl.addEventListener('input', function() {
      calculateSquare(inputEl, resultEl);
    });
    
    // 如果需要点击按钮计算，可以再加个按钮，绑定click事件
    // 比如在calc-group里加<button class="calc-btn">计算平方</button>
    // const btn = group.querySelector('.calc-btn');
    // btn.addEventListener('click', () => calculateSquare(inputEl, resultEl));
  });
});

关键思路解释 #

• 用类名替代重复ID：避免使用相同的id（比如多个id="a"），因为DOM中id必须唯一，getElementById只会返回第一个匹配元素。用类名可以批量选中所有目标元素。
• 函数复用：calculateSquare函数只负责核心的计算逻辑，接收输入元素和结果元素作为参数，不管是a还是b，只要传入对应的DOM元素就能正常工作。
• 批量绑定事件：通过遍历所有计算组，给每个组内的输入框单独绑定事件，确保每个输入框的操作都能触发计算并更新对应结果框。

这样修改后，不管你添加多少个类似的文本框对，这个函数都能复用处理，不会出现只有第一个有效的问题啦！

内容的提问来源于stack exchange，提问作者Bouzazi Wessim