JS如何退出onclick函数？单词游戏按钮移动失效求助

嘿，作为JS新手能做出这样的雏形已经很棒啦！咱们一步步拆解你遇到的问题：

一、为什么第三次点击按钮会失效？ #

你的代码里，每次把按钮从submain移到main时，都会给按钮重新绑定onclick事件（让它移回submain），这会直接覆盖掉按钮最初的点击事件。当按钮回到submain后，它的点击逻辑已经变成“移回submain”，再点击自然不会触发移动到main的操作，看起来就像失效了。

二、怎么解决按钮移动失效的问题？ #

我们可以给每个按钮绑定一个通用的点击函数，让它自己判断当前所在的父容器，然后切换到另一个容器。这样不管按钮在哪个容器里，点击都能正确执行移动：

// 创建主容器
var div = document.createElement('div');
div.innerHTML = ''; // 注意是innerHTML不是innerHtml，你之前写错啦！
document.body.appendChild(div);
div.classList.add('main');

// 创建子容器
var divsec = document.createElement('div');
divsec.innerHTML = ''; // 同样修正拼写
document.body.appendChild(divsec);
divsec.classList.add('submain');

// 获取单词数组
var arr = prompt("请在此输入单词或句子，不要让对手看到！");
var array = arr.split('').sort(); // 不要用全局变量array，用var/let声明
console.log(array);
alert("开始拼单词吧！");

var mainContainer = document.querySelector('.main'); // 用querySelector更方便
var subContainer = document.querySelector('.submain');

for(var i = 0; i < arr.length; i++){
  var button = document.createElement('button');
  subContainer.appendChild(button);
  button.innerHTML = array[i];
  
  // 绑定通用的点击切换函数
  button.onclick = function() {
    // 判断当前按钮在哪个容器里
    if (this.parentElement === subContainer) {
      mainContainer.appendChild(this);
    } else {
      subContainer.appendChild(this);
    }
  }
}

关键改动说明： #

• 修正了拼写错误：innerHtml → innerHTML（JS是大小写敏感的）
• 用querySelector替代getElementsByClassName，获取单个元素更简洁
• 给按钮绑定了一个能判断父容器的函数，不用每次移动都覆盖事件，从根源解决了第三次点击失效的问题

三、如何“退出”onclick函数？ #

你说的“退出onclick函数”一般有两种场景，对应不同的解决方法：

1. 彻底移除按钮的点击事件（以后点击都没反应） #

可以直接把onclick设为null：

// 比如在某个条件下移除按钮的点击事件
button.onclick = null;

如果是用addEventListener绑定的事件，就用对应的removeEventListener：

// 先定义函数
function toggleButton() {
  // 切换逻辑
}
// 绑定事件
button.addEventListener('click', toggleButton);
// 移除事件
button.removeEventListener('click', toggleButton);

2. 在函数执行过程中提前退出（不执行后续逻辑） #

可以用return;语句，满足条件时直接终止函数执行：

button.onclick = function() {
  // 比如当按钮移动次数达到3次时，不再执行移动
  if (this.moveCount >= 3) {
    alert("移动次数用完啦！");
    return; // 退出函数，不执行后续移动逻辑
  }
  
  // 正常切换逻辑
  if (this.parentElement === subContainer) {
    mainContainer.appendChild(this);
  } else {
    subContainer.appendChild(this);
  }
  
  // 记录移动次数
  this.moveCount = (this.moveCount || 0) + 1;
}

这样就能灵活控制onclick函数的执行啦！

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