JavaScript加减功能异常：加函数仅执行一次，减函数运行正常

问题原因分析 #

你的代码存在两个核心问题：

1. 事件冒泡干扰：包含数字的div嵌套在绑定了leftm()减函数的父div内，点击加按钮时，事件会冒泡到父元素，触发leftm()，导致加操作被立刻抵消，看起来加函数只生效一次甚至没生效。
2. 变量类型与运算符顺序问题：
   • 初始x是从innerHTML获取的字符串类型，虽然JavaScript会做隐式转换，但存在潜在的类型错误风险。
   • 使用了后置递增/递减运算符（x++/x--），会先将旧值赋值给innerHTML，再更新变量，导致用户看到的是操作前的旧值，不符合直观预期。

修复后的代码 #

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://athena3140.ml/style.css">
  </head>
  <body>
    <div id="container" class="container">
      <!--first-->
      <div class="inner" onclick="leftm()">
        <div class="minus">
          <div>&#8722;</div>
        </div>
        <div onclick="left(event)">
          <div class="mf" id="left">0</div>
        </div>
      </div> 
    <script>
      // 缓存DOM元素，避免重复查询提升性能
      const leftElement = document.getElementById("left");
      // 显式转换为数字类型，避免字符串操作问题
      let x = Number(leftElement.innerHTML);
      
      function left(event) {
        // 阻止事件冒泡，避免触发父元素的减函数
        event.stopPropagation();
        // 先自增再赋值，显示更新后的数值
        x++;
        leftElement.innerHTML = x;
      }
      function leftm() {
        // 先自减再赋值，显示更新后的数值
        x--;
        leftElement.innerHTML = x;
      }
    </script>
  </body>
</html>

关键修改点说明 #

• 阻止事件冒泡：在left()函数中接收event参数并调用event.stopPropagation()，确保点击加按钮时不会触发父元素的减函数。
• 类型转换：使用Number()将初始的字符串值转为数字，避免隐式转换带来的意外问题。
• 运算符顺序调整：将后置递增/递减改为先自增/自减再赋值，让用户看到的是操作后的最新数值。
• DOM元素缓存：提前获取并缓存目标元素，避免每次函数执行都重复查询DOM，提升代码性能。

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