开发Wordle克隆时keyup函数回车触发样式修改失效问题排查

代码中的核心问题 #

• 样式访问错误：row.letters[i].innerHTML.style 完全错误——innerHTML返回的是元素的文本内容字符串，根本没有style属性，要修改样式得直接操作DOM元素本身的style对象。
• 条件判断逻辑失效：row.letters[i] === word[0], word[1], word[2], word[3], word[4] 用了逗号运算符，这只会返回最后一个值，根本做不到“判断字母是否在目标单词里”的效果。而且原逻辑没处理重复字母的情况，会导致匹配规则和Wordle不一致。
• 循环范围错误：for (let i = 0; i < letters.length - 1; i++) 会少循环一次，要是letters是5个元素的数组，最后一个字母根本不会被处理。
• 变量命名冲突：Array.from(inputs).forEach(function(inputs) 里的参数名和外部的inputs变量重名了，会导致内部变量覆盖外部的，容易出问题。
• 无输入校验：按回车键时没检查当前行是不是已经填满了，可能会提前触发样式修改，导致逻辑混乱。

修正后的完整代码 #

// 优化后的颜色匹配函数，完全贴合Wordle的规则
const colorChange = (targetWord, currentRow) => {
  const wordLetters = [...targetWord];
  const tiles = currentRow.letters;

  // 第一步：标记位置和字母都匹配的绿色方块
  for (let i = 0; i < tiles.length; i++) {
    const tileLetter = tiles[i].textContent.trim();
    if (tileLetter === wordLetters[i]) {
      tiles[i].style.backgroundColor = "#618B55";
      // 把已匹配的字母设为null，避免后续重复匹配
      wordLetters[i] = null;
    }
  }

  // 第二步：标记字母存在但位置错误的黄色方块，以及不存在的灰色方块
  for (let i = 0; i < tiles.length; i++) {
    const tileLetter = tiles[i].textContent.trim();
    // 跳过已经是绿色的方块
    if (tiles[i].style.backgroundColor === "#618B55") continue;
    
    const matchIndex = wordLetters.indexOf(tileLetter);
    if (matchIndex !== -1) {
      tiles[i].style.backgroundColor = "#B19F4C";
      wordLetters[matchIndex] = null;
    } else {
      tiles[i].style.backgroundColor = "#787C7E";
    }
  }
};

// 修正事件监听逻辑，添加输入校验
Array.from(inputs).forEach(function(input) {
  input.addEventListener('keyup', function(event) {
    const keyCode = event.keyCode;

    // 输入字母后自动跳转到下一个输入框
    if (keyCode >= 65 && keyCode <= 90 && input.value.length === 1) {
      input.nextElementSibling?.focus();
    } 
    // 退格时跳转到上一个输入框
    else if (keyCode === 8 && input.previousElementSibling) {
      input.previousElementSibling.focus();
    } 
    // 回车键触发样式修改，先检查当前行是否填满
    else if (keyCode === 13) {
      // 假设当前输入框的父元素是行容器，获取该行所有输入框
      const currentRowInputs = Array.from(input.parentElement.children);
      const isRowFilled = currentRowInputs.every(elem => elem.value.trim() !== '');
      
      if (isRowFilled) {
        colorChange(word, row);
      }
    }
  })
})

关键修改点说明 #

1. 删掉了错误的innerHTML调用，直接用tiles[i].style修改背景色，这是样式不生效的核心原因。
2. 重构了匹配逻辑：先处理完全匹配的绿色字母，再处理存在但位置不对的黄色字母，同时标记已匹配的字母，避免重复计数，和原版Wordle规则一致。
3. 修正了循环范围，确保所有字母方块都能被处理。
4. 改了事件监听的参数名，避免变量冲突。
5. 加了回车键触发前的校验，只有当前行所有输入都填了才会执行样式修改。
6. 用?.可选链操作符，防止没有下一个/上一个元素时出现报错。

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