Html templates and selectors-CodePudding

Hello i have issues with selecting elements for my word clone game, my problem is that when i press the key enter, i can't get the letters to get down to the next row, this is my code in question:

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 >
        <div  data-key="Q">Q</div>
        <div  data-key="W">W</div>
        <div  data-key="E">E</div>
        <div  data-key="R">R</div>
        <div  data-key="T">T</div>
        <div  data-key="Y">Y</div>
        <div  data-key="U">U</div>
        <div  data-key="I">I</div>
        <div  data-key="O">O</div>
        <div  data-key="P">P</div>
      </div>
      <div >
        <div  data-key="A">A</div>
        <div  data-key="S">S</div>
        <div  data-key="D">D</div>
        <div  data-key="F">F</div>
        <div  data-key="G">G</div>
        <div  data-key="H">H</div>
        <div  data-key="J">J</div>
        <div  data-key="K">K</div>
        <div  data-key="L">L</div>
        <div  data-key="Ñ">Ñ</div>
      </div>
      <div >
        <div  id="enter">↵</div>
        <div  data-key="Z">Z</div>
        <div  data-key="X">X</div>
        <div  data-key="C">C</div>
        <div  data-key="V">V</div>
        <div  data-key="B">B</div>
        <div  data-key="N">N</div>
        <div  data-key="M">M</div>
        <div  id="backspace">

Here is my problem: the idea is when i press the enter key, the Listener reset the position of the letter count(that works), and with row = 1; i get the position to the second row, that the problem, i dont know why i can't get the second row of div , maybe is because im generating the divs through templates and the indexation of the divs created works different?

Thanks for the possibles answers to my question.

EDIT: After searching information about my problem, i know why is not working, its because when page is loaded there only a Div with i looked about to posible solutions, RemoveListener and Event Delegation, the second solution, in theory i know how to works, but in my example i dont know how to implement because my listener on keyboard interact at the same time with the divs that are dynamic added.

CodePudding user response：

Well guys i know where was the problem;

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;

here was the problem "elements4" is a query selector captured in the begin of the js because of that, the selector was "fixed" to the first row of word and letters divs, changing to

let elements4 = document.querySelectorAll('.word'); elements4[word - 1].querySelectorAll('.slot')[letter - 1].innerText = key;

inside of the function works.

gonna put the change to the function to possibles new people that encounter this problem;

function addLetter(key) {
    if (letter < 6) {
        let elements4 = document.querySelectorAll('.word');
        elements4[word - 1].querySelectorAll('.letters')[letter - 1].innerText = key;
        letter  = 1;
        
    } 
        
    
}