JavaScript函数内修改布尔值后未触发alert弹窗如何解决

尝试将inputX[0]的值从false修改为true，预期修改成功后弹出提示，但实际运行时始终收不到inputX[0]已设置为true的弹窗，对应实现代码如下：

<body>
  <div>
    <button id="S1" onclick="btnManager(this);"></button>
  </div>

  <script>
    var inputX = new Array();
    definedInputs();
    btnManager();
    question();

    function definedInputs() {
      inputX[0] = false;
    }

    function btnManager(pressedBtn) {
      if (pressedBtn.id == (id = "S1")) {
        inputX[0] = true;
      }
    }

    function question() {
      if (inputX[0] == true) {
        alert("inputX is set to true");
      }
    }
  </script>
</body>

一共两个核心问题导致逻辑不生效：

• 初始化执行报错：页面加载阶段直接无参调用btnManager()，函数形参pressedBtn为undefined，访问undefined.id会直接抛出类型错误，打断后续JS执行。
• 执行时机完全错位：哪怕没有初始化报错，question()只在页面加载阶段执行了一次，此时还没点击按钮，inputX[0]还是初始值false，不满足弹窗条件。后续点击按钮把inputX[0]改成true之后，没有再调用question()做判断，自然不会弹提示。

另外原代码里pressedBtn.id == (id = "S1")的写法属于不规范操作，会意外创建全局变量id，虽然对比结果不受影响，但存在隐性风险。

按以下步骤调整代码即可：

1. 删除初始化阶段无参调用btnManager()的代码，避免启动时报错
2. 在按钮点击逻辑里，把inputX[0]设置为true之后，主动调用question()执行判断
3. 修正if判断里的不规范赋值写法，直接对比字符串值

修复后的可运行代码：

<body>
  <div>
    <button id="S1" onclick="btnManager(this);">点击修改值</button>
  </div>

  <script>
    var inputX = new Array();
    definedInputs();

    function definedInputs() {
      inputX[0] = false;
    }

    function btnManager(pressedBtn) {
      if (pressedBtn.id === "S1") {
        inputX[0] = true;
        question(); // 值修改完成后触发判断
      }
    }

    function question() {
      if (inputX[0] === true) {
        alert("inputX[0] is set to true");
      }
    }
  </script>
</body>

这类值修改后预期逻辑不触发的问题，可以按固定顺序排查：

• 第一步先打开浏览器开发者工具的Console面板，看有没有JS报错，前置报错会直接打断执行流，80%的前端逻辑异常都是这个原因
• 第二步确认执行时机：判断值的逻辑必须在值修改完成之后执行，JS默认是同步从上到下执行，提前判断永远拿不到修改后的值
• 第三步可以在值赋值的位置、条件判断的位置分别加console.log(inputX[0])打日志，确认值的实际变化和判断时机是否匹配

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