如何让JavaScript中的按钮仅执行一次创建网格的代码？

你的问题不是循环的问题——循环确实会在生成256个div后停止，但每次点击按钮都会完整调用一次createGrid函数，所以重复点击就会不断往容器里加新div。加break没用是因为break只能终止当前的循环，却阻止不了下次点击触发函数。

给你几个简单的解决方案：

方案1：移除事件监听器 #

把匿名回调改成命名函数，点击一次后就移除这个事件监听，确保后续点击不会再触发：

// 先定义命名的回调函数
function handleGridClick() {
  createGrid();
  // 移除当前事件监听
  inputBtn.removeEventListener("click", handleGridClick);
}

// 绑定事件
inputBtn.addEventListener("click", handleGridClick);

方案2：用标记变量控制执行 #

设置一个布尔变量，标记网格是否已经生成，每次点击前先判断：

let gridAlreadyCreated = false;

inputBtn.addEventListener("click", function () {
  // 如果已经生成过，直接返回不执行
  if (gridAlreadyCreated) return;
  createGrid();
  // 标记为已生成
  gridAlreadyCreated = true;
});

方案3：点击后禁用按钮 #

直接把按钮设为禁用状态，从根源上阻止重复点击：

inputBtn.addEventListener("click", function () {
  createGrid();
  // 禁用按钮，用户无法再次点击
  inputBtn.disabled = true;
});

另外，你的createGrid函数里div变量没有用let或const声明，会变成全局变量，建议补上：

function createGrid() {
  for (let i = 0; i < 256; i++) {
    // 加上const声明变量
    const div = document.createElement("div");
    div.classList.add("grid-child");
    if (gridContainer) {
      randomColor();
    }
    gridContainer.appendChild(div);
  }
}

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