如何通过编写一个addAndSubtract函数简化我的JavaScript代码？

我们可以把重复的点击逻辑抽成通用函数，同时优化DOM查询性能，以下是简化后的实现：

修改后的JavaScript代码 #

// 仅获取一次DOM元素，避免重复查询浪费性能
const output = document.querySelector("#output");
const addBtn = document.querySelector("#add");
const subtractBtn = document.querySelector("#subtract");

// 通用加减处理函数，通过传入增量区分操作
function addAndSubtract(increment) {
  // 将文本内容转为数字
  let currentValue = Number(output.innerText);
  // 计算新值，同时用Math.min/max直接处理0-10的边界限制
  let newValue = Math.max(0, Math.min(currentValue + increment, 10));
  // 更新显示内容
  output.innerText = newValue;
}

// 给两个按钮绑定事件，分别传入对应增量
addBtn.addEventListener("click", () => addAndSubtract(1));
subtractBtn.addEventListener("click", () => addAndSubtract(-1));

简化核心要点 #

• 减少DOM查询：原代码每次点击都重新获取#output，现在仅在初始化时获取一次，提升运行效率。
• 复用逻辑：用单个addAndSubtract函数处理加减操作，通过传入不同增量（1或-1）区分功能，避免重复编写几乎一致的代码。
• 简化边界判断：用Math.max(0, ...)确保数值不低于0，Math.min(..., 10)确保不超过10，替代原有的if分支，代码更简洁直观。

原HTML代码无需修改 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script defer src="script.js"></script>
    <title>Counter</title>
</head>
<body>
    <h1>Le Count!</h1>
    <div class = "Counter_Container">
        <button id="subtract">-</button><span id="output">0</span><button id="add">+</button>
    </div>
</body>
</html>

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