无法让moveLetter函数识别letterButtonArray中的按钮对象求助

核心问题分析 #

你遇到的Uncaught ReferenceError: letterButton is not defined或传参显示undefined，本质是按钮点击事件绑定的作用域错误：

• 若用字符串形式绑定onclick="moveLetter(letterButton)"，字符串内的letterButton会去全局作用域查找，但你生成按钮时的letterButton是循环内的局部变量，全局不存在；
• 若直接绑定函数但未正确获取触发元素，函数内无法找到对应的按钮变量。

可行解决方案 #

方案1：利用this获取点击的按钮对象 #

这是最简洁的方式，事件触发时this会指向触发事件的DOM元素（即你的letterButton）：

// 定义移动逻辑函数
function moveLetter() {
  const clickedBtn = this;
  // 执行移动操作：将按钮添加到目标div
  document.getElementById('target-div').appendChild(clickedBtn);
}

// 生成按钮并绑定事件
function startGame() {
  const letterButtonArray = [];
  const sourceDiv = document.getElementById('source-div');
  
  for (let i = 0; i < 6; i++) {
    const letterButton = document.createElement('button');
    letterButton.className = 'letter-btn';
    // 替换成你的随机字母生成逻辑
    letterButton.innerHTML = String.fromCharCode(65 + Math.floor(Math.random() * 26));
    
    // 用addEventListener绑定事件，无需传参
    letterButton.addEventListener('click', moveLetter);
    
    letterButtonArray.push(letterButton);
    sourceDiv.appendChild(letterButton);
  }
}

// 绑定START GAME按钮的点击事件
document.getElementById('start-btn').addEventListener('click', startGame);

方案2：闭包传参（需额外参数时使用） #

如果需要在moveLetter中传递其他参数（比如按钮索引），可以用闭包保留按钮对象的引用：

// 封装带参数的事件处理函数
function createMoveHandler(button, index) {
  return function() {
    console.log('点击的按钮索引:', index);
    document.getElementById('target-div').appendChild(button);
  }
}

function startGame() {
  const letterButtonArray = [];
  const sourceDiv = document.getElementById('source-div');
  
  for (let i = 0; i < 6; i++) {
    const letterButton = document.createElement('button');
    letterButton.className = 'letter-btn';
    letterButton.innerHTML = String.fromCharCode(65 + Math.floor(Math.random() * 26));
    
    // 绑定闭包函数，传入按钮和索引
    letterButton.addEventListener('click', createMoveHandler(letterButton, i));
    
    letterButtonArray.push(letterButton);
    sourceDiv.appendChild(letterButton);
  }
}

验证步骤 #

在moveLetter函数开头添加日志，确认按钮对象是否正确获取：

function moveLetter() {
  console.log('点击的按钮:', this); // 应输出按钮DOM元素
  console.log('按钮字母:', this.innerHTML); // 应输出按钮上的字母
}

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