HTML与JS开发疑问：点击按钮触发字符串拼接的函数为何无法正常运行？

你的代码存在1个核心逻辑断层，导致点击按钮后看不到拼接效果：

• DOM内容更新的时机完全错位
  你编写的document.getElementById("demo").innerHTML = cars;语句处于脚本全局作用域，页面加载完成的瞬间就会执行，此时cars还是初始值"7"，只会把固定的初始值渲染到<p id="demo">元素中。之后点击按钮触发aa1()函数时，函数内部虽然完成了字符串拼接、修改了cars变量的值，但没有任何逻辑把更新后的字符串同步到页面DOM上，用户自然感知不到任何变化。

只需要把DOM更新的逻辑挪到点击触发的函数内部，保证每次完成字符串拼接后，第一时间把最新值同步到页面即可，修正后的完整代码如下：

<!DOCTYPE html>
<html>
 <body>
  <h2>JavaScript 字符串拼接测试</h2>
  <button id="MUL" onclick="aa1()">alpha</button>
  <p id="demo"></p>
  <script>
   let cars = "7";
   let a1 = "8";
   function aa1() {
      // 执行字符串拼接
      cars = cars.concat(a1)
      // 拼接完成后实时把结果渲染到页面
      document.getElementById("demo").innerHTML = cars;
   }
   // 页面初始加载时渲染一次初始值，避免段落区域空白
   document.getElementById("demo").innerHTML = cars;
  </script>
 </body>
</html>

修正后的交互效果：每点击一次alpha按钮，就会在现有字符串末尾追加"8"，拼接的最新结果会实时显示在下方段落中。

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