按钮点击未触发外部JS函数，页面加载时函数却自动执行

嗨，我来帮你搞定这个问题！你碰到的这两个现象——点击按钮没反应、页面一加载函数就自动跑了——其实是同一个小错误导致的，咱们一步步拆解：

核心问题：你直接执行了函数，而不是传递函数引用 #

在你的HTML代码里，这行是关键：

document.getElementById("nextScramble").addEventListener("click", scrambleGen(document.getElementById("scramble")));

当你写scrambleGen(...)的时候，浏览器会立刻执行这个函数，把函数执行后的返回值（这里是undefined，因为你的函数没有return语句）绑定给点击事件的回调。但我们需要的是：当按钮被点击时，再去执行这个函数。

修正方案：用匿名函数包裹，传递函数引用 #

把上面的代码改成下面两种写法之一就行：

写法1：普通匿名函数

document.getElementById("nextScramble").addEventListener("click", function() {
  // 点击按钮时才会调用scrambleGen
  scrambleGen(document.getElementById("scramble"));
});

写法2：箭头函数（更简洁）

document.getElementById("nextScramble").addEventListener("click", () => {
  scrambleGen(document.getElementById("scramble"));
});
// 甚至可以更短（如果只有一行代码）：
// document.getElementById("nextScramble").addEventListener("click", () => scrambleGen(document.getElementById("scramble")));

这样修改后，我们传递给addEventListener的是一个函数引用，只有当按钮被点击时，这个匿名函数才会执行，进而调用你的scrambleGen函数。

额外小优化：修复JS里的全局变量问题 #

你的scrambleGen函数里，scramble和lastMove没有用let/const声明，会默认变成全局变量，可能引发奇怪的问题。给它们加上声明会更规范：

function scrambleGen(textBox) {
  let scramble = ""; // 加上let
  const moves = ["R","R2","R3","L","L2","L3","U","U2","U3","D","D2","D3","F","F2","F3","B","B2","B3"];
  let lastMove = ""; // 加上let
  
  // 后面的循环逻辑保持不变...
}

为什么页面加载时函数会自动执行？ #

回到你原来的代码，当浏览器解析到scrambleGen(document.getElementById("scramble"))这行时，它会把这行当成一个普通的函数调用执行——毕竟你加了括号和参数，浏览器会直接运行它，所以页面一加载就生成了 scramble。

总结修改后的关键代码 #

• HTML里的script部分：

  <script>
    document.getElementById("nextScramble").addEventListener("click", function() {
      scrambleGen(document.getElementById("scramble"));
    });
  </script>
  

• JS里的变量声明：给scramble和lastMove加上let

改完之后，点击"Next"按钮就会触发函数生成新的scramble，页面加载时也不会自动执行啦！

内容来源于stack exchange