Wordle克隆游戏Enter键切换输入行失效问题求助

问题根源 #

你的代码中elements4变量是页面加载时获取的.word元素集合，点击Enter新增第二行后，这个变量并没有更新，仍然只包含初始的第一个.word元素。当word计数增加到2时，elements4[word-1]也就是elements4[1]不存在，导致无法向新行输入字母。

修复方案 #

核心是不要依赖预先存储的DOM元素集合，而是在需要操作时实时获取最新的.word元素；同时可以简化逻辑，确保每次输入都指向当前活跃的行。

修改后的代码如下：

const node = 
    `<div class="word">
        <div class="letters"></div>
        <div class="letters"></div>
        <div class="letters"></div>
        <div class="letters"></div>
        <div class="letters"></div>
      </div>`

function elementsCreate(html){
    const template = document.createElement("template");
    template.innerHTML = html.trim();
    return template.content.firstElementChild;
}

// 初始化第一行
document.getElementById('words').appendChild(elementsCreate(node));

let letter = 1;
let word = 1;

function addLetter(key) {
    if (letter < 6) {
        // 实时获取所有.word元素，确保能拿到新生成的行
        const allWords = document.querySelectorAll('.word');
        // 获取当前行的所有letters元素
        const currentLetters = allWords[word - 1].querySelectorAll('.letters');
        currentLetters[letter - 1].innerText = key;
        letter += 1;
    }
}

// 键盘点击事件
document.querySelectorAll('.key').forEach((item) => {
    item.addEventListener('click', function() {
        addLetter(this.dataset.key);
    });
});

// Enter和Backspace事件处理
document.querySelectorAll('.command').forEach((item) => {
    item.addEventListener('click', function() {
        if (this.id === 'enter') {
            // 新增一行
            document.getElementById('words').appendChild(elementsCreate(node));
            letter = 1;
            word += 1;
        } else if (this.id === 'backspace') {
            // 退格逻辑
            if (letter > 1) {
                letter -= 1;
                const allWords = document.querySelectorAll('.word');
                const currentLetters = allWords[word - 1].querySelectorAll('.letters');
                currentLetters[letter - 1].innerText = '';
            }
        }
    })
})

关键改动说明 #

1. 移除预存的elements4变量：在addLetter函数中每次通过document.querySelectorAll('.word')实时获取最新的行元素，确保新生成的行能被获取到。
2. 简化data-key获取：用this.dataset.key替代item.attributes["data-key"].value，写法更简洁。
3. 补充退格逻辑：完善了Backspace按钮的功能，让交互更完整。

如果想进一步优化事件绑定逻辑（适合后续动态新增键盘元素的场景），可以用事件委托把所有交互绑定到父元素#keyboard上：

// 事件委托方式绑定所有键盘交互
document.getElementById('keyboard').addEventListener('click', function(e) {
    if (e.target.classList.contains('key')) {
        addLetter(e.target.dataset.key);
    } else if (e.target.classList.contains('command')) {
        if (e.target.id === 'enter') {
            document.getElementById('words').appendChild(elementsCreate(node));
            letter = 1;
            word += 1;
        } else if (e.target.id === 'backspace') {
            if (letter > 1) {
                letter -= 1;
                const allWords = document.querySelectorAll('.word');
                const currentLetters = allWords[word - 1].querySelectorAll('.letters');
                currentLetters[letter - 1].innerText = '';
            }
        }
    }
});

这种方式不需要给每个按键单独绑定事件，后续新增键盘元素时也无需重新绑定，逻辑更健壮。

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