如何创建带加减按钮的计数器，通过传参复用单个函数而非两个独立函数？

嘿，这个需求很合理！你的现有代码逻辑没问题，但确实存在重复——两个函数除了最后是-1还是+1，其他步骤完全一致。咱们可以把公共逻辑抽出来，用一个带参数的通用函数来处理，这样代码会更简洁易维护。

实现思路 #

核心就是把「加1/减1」这个变化的部分作为参数传递给函数，函数内部根据传入的参数（步长step）来执行对应的计算。另外还可以优化一下，提前缓存计数器元素，避免每次点击都重复查找DOM，提升一点性能。

修改后的完整代码 #

// 先缓存计数器元素，避免重复查找DOM
const counterElement = document.getElementById('counter');

// 通用的更新计数器函数，接收步长参数step
function updateCounter(step) {
  // 获取当前计数器值并转为数字
  const currentValue = parseInt(counterElement.innerHTML);
  // 计算新值：当前值 + 步长（step为-1就是减1，为+1就是加1）
  const newValue = currentValue + step;
  // 更新DOM显示
  counterElement.innerHTML = newValue;
}

// 给减号按钮绑定事件，传入-1作为步长
document.getElementById('minus').onclick = () => updateCounter(-1);
// 给加号按钮绑定事件，传入+1作为步长
document.getElementById('plus').onclick = () => updateCounter(1);

代码解释 #

• 缓存元素：const counterElement = document.getElementById('counter')——把计数器元素提前存起来，不用每次点击都去DOM里找一次，更高效。
• 通用函数updateCounter：接收一个step参数，这个参数就是我们要加或减的数值：点击减号时传-1，点击加号时传1。
• 箭头函数绑定事件：用箭头函数来包裹调用，这样可以方便地给updateCounter传递参数，同时保持代码简洁。

额外小优化（可选） #

如果担心计数器初始值不是数字（比如DOM里是空的或者有非数字内容），可以给parseInt加个默认值，避免出现NaN：

const currentValue = parseInt(counterElement.innerHTML) || 0;

这样如果解析失败，会默认用0作为初始值，避免计算出错。

内容的提问来源于stack exchange，提问作者Hannah Matthewson