你好，我在為我的文字克隆游戲選擇元素時遇到問題，我的問題是當我按下回車鍵時，我無法讓字母進入下一行，這是我的問題代碼：
const node =
`<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>`
function elementsCreate(html){
const template = document.createElement("template");
template.innerHTML = html.trim();
return template.content.firstElementChild;
}
const myEle = elementsCreate(node);
document.getElementById('words').appendChild(myEle);
let elements = document.querySelectorAll('.key');
let elements2 = document.querySelectorAll('.letters');
let elements3 = document.querySelectorAll('.command');
let elements4 = document.querySelectorAll('.word');
let letter = 1;
let word = 1;
function addLetter(key) {
if (letter < 6) {
elements4[word - 1].querySelectorAll('.letters')[letter - 1].innerText = key;
letter = 1;
}
}
//Keyboard
elements.forEach((item) => {
item.addEventListener('click', function() {
addLetter(item.attributes["data-key"].value)
});
});
//Enter
elements3.forEach((item) => {
item.addEventListener('click', function() {
const myEle = elementsCreate(node);
document.getElementById('words').appendChild(myEle);
letter = 1;
word = 1;
})
})<main>
<h1>Word clone</h1>
<div id="words">
</div>
<div id="keyboard">
<div class="keyboard-line">
<div class="key" data-key="Q">Q</div>
<div class="key" data-key="W">W</div>
<div class="key" data-key="E">E</div>
<div class="key" data-key="R">R</div>
<div class="key" data-key="T">T</div>
<div class="key" data-key="Y">Y</div>
<div class="key" data-key="U">U</div>
<div class="key" data-key="I">I</div>
<div class="key" data-key="O">O</div>
<div class="key" data-key="P">P</div>
</div>
<div class="keyboard-line">
<div class="key" data-key="A">A</div>
<div class="key" data-key="S">S</div>
<div class="key" data-key="D">D</div>
<div class="key" data-key="F">F</div>
<div class="key" data-key="G">G</div>
<div class="key" data-key="H">H</div>
<div class="key" data-key="J">J</div>
<div class="key" data-key="K">K</div>
<div class="key" data-key="L">L</div>
<div class="key" data-key="?">?</div>
</div>
<div class="keyboard-line">
<div class="command" id="enter">?</div>
<div class="key" data-key="Z">Z</div>
<div class="key" data-key="X">X</div>
<div class="key" data-key="C">C</div>
<div class="key" data-key="V">V</div>
<div class="key" data-key="B">B</div>
<div class="key" data-key="N">N</div>
<div class="key" data-key="M">M</div>
<div class="command" id="backspace">這是我的問題：我的想法是當我按下回車鍵時，監聽器重置字母計數的位置（有效），并且 row = 1; 我得到了第二行的位置，問題是，我不知道為什么我不能得到 div 的第二行，也許是因為我通過模板生成 div 并且創建的 div 的索引有效不同的？
感謝您對我的問題的可能回答。
編輯：搜索有關我的問題的資訊后，我知道為什么不起作用，因為當頁面加載時只有一個帶有 的 Div 我尋找可能的解決方案，RemoveListener 和事件委托，理論上是第二種解決方案我知道如何作業，但在我的示例中我不知道如何實作，因為我在鍵盤上的監聽器同時與動態添加的 div 互動。
uj5u.com熱心網友回復：
伙計們，我知道問題出在哪里；
function addLetter(key) {
if (letter < 6) {
elements4[word - 1].querySelectorAll('.letters')[letter - 1].innerText = key;
letter = 1;
}
}elements4[word - 1].querySelectorAll('.letters')[letter - 1].innerText = key;
這是問題“elements4”是在 js 開頭捕獲的查詢選擇器，因此，選擇器被“固定”到單詞和字母 div 的第一行，更改為
讓 elements4 = document.querySelectorAll('.word'); elements4[word - 1].querySelectorAll('.slot')[letter - 1].innerText = key;
函式內部作業。
將把功能的改變交給遇到這個問題的可能的新人；
function addLetter(key) {
if (letter < 6) {
let elements4 = document.querySelectorAll('.word');
elements4[word - 1].querySelectorAll('.letters')[letter - 1].innerText = key;
letter = 1;
}
}轉載請註明出處，本文鏈接：https://www.uj5u.com/net/537519.html