How to make on-screen keyboard interactive with content-editable div?

Question

I am creating an on-screen keyboard for a Wordle type game. I've been trying to make the on-screen keyboard actually interactive and input the proper letter in the grids above. (For example, if the user clicks the 'Q' button, a Q is put in one of the grid boxes.)

I've tried to use event listeners in Javascript but that did not work either. Should I try to do this with a different approach?

Here is my keyboard code:

<div id = "keyboard-totality" style = "position: relative; top: -100px;">

<div class = "back-space">

    <button class = "key-button">DEL</button>

</div>
<div class = "first-lane">

    <button onClick = "buttonFunctionQ()" class = "key-button">Q</button>
    <button class = "key-button">W</button>
    <button class = "key-button">E</button>
    <button class = "key-button">R</button>
    <button class = "key-button">T</button>
    <button class = "key-button">Y</button>
    <button class = "key-button">U</button>
    <button class = "key-button">I</button>
    <button class = "key-button">O</button>
    <button class = "key-button">P</button>

</div>

<div class = "second-lane">

    <button class = "key-button">A</button>
    <button class = "key-button">S</button>
    <button class = "key-button">D</button>
    <button class = "key-button">F</button>
    <button class = "key-button">G</button>
    <button class = "key-button">H</button>
    <button class = "key-button">J</button>
    <button class = "key-button">K</button>
    <button class = "key-button">L</button>
    <button class = "key-button">P</button>
    <button class = "key-button">ENTER</button>

</div>

<div class = "third-lane">

    <button class = "key-button">Z</button>
    <button class = "key-button">X</button>
    <button class = "key-button">C</button>
    <button class = "key-button">V</button>
    <button class = "key-button">B</button>
    <button class = "key-button">N</button>
    <button class = "key-button">M</button>

</div>

Here is my div code:

<div class="container" style = "position:relative; left:825px; top:-400px;">

 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>
 <div onkeypress="return (this.innerText.length <= 0)" contenteditable = "true"></div>

</input>

This is my javascript code:

document.addEventListener("keyup", (e) => {

if (guessesRemaining === 0) {
    return
}

let pressedKey = String(e.key)
if (pressedKey === "back-space") {
    alert("win");
}

if (pressedKey === "Enter") {
    checkGuess()
    return
}

let found = pressedKey.match(/[a-z]/gi)
if (!found || found.length > 1) {
    return
} else {
    insertLetter(pressedKey)
}
})

Thank you

Answer 1

Do a test with this and let me know if you have any comments. I have changed some styles apply them back.

<div id="keyboard-totality" style=" position: relative; top: 100px;">
    <div class="back-space">
        <button class="key-button" id="DEL">DEL</button>
    </div>
    <div class="first-lane">
        <button class="key-button" value="Q">Q</button>
        <button class="key-button" value="W">W</button>
        <button class="key-button" value="E">E</button>
        <button class="key-button" value="R">R</button>
        <button class="key-button" value="T">T</button>
        <button class="key-button" value="Y">Y</button>
        <button class="key-button" value="U">U</button>
        <button class="key-button" value="I">I</button>
        <button class="key-button" value="O">O</button>
        <button class="key-button" value="P">P</button>
    </div>

    <div class="second-lane">
        <button class="key-button" value="A">A</button>
        <button class="key-button" value="S">S</button>
        <button class="key-button" value="D">D</button>
        <button class="key-button" value="F">F</button>
        <button class="key-button" value="G">G</button>
        <button class="key-button" value="H">H</button>
        <button class="key-button" value="J">J</button>
        <button class="key-button" value="K">K</button>
        <button class="key-button" value="L">L</button>
        <button class="key-button" value="P">P</button>
        <button class="key-button" value="&nbsp;">ENTER</button>
    </div>
    <div class="third-lane">
        <button class="key-button" value="Z">Z</button>
        <button class="key-button" value="X">X</button>
        <button class="key-button" value="C">C</button>
        <button class="key-button" value="V">V</button>
        <button class="key-button" value="B">B</button>
        <button class="key-button" value="N">N</button>
        <button class="key-button" value="M">M</button>
    </div>


    <div class="container"
        style="position:absolute; left:400px;float: right; width: 400px; background-color: green;">
        <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true" id="amo"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    <div onkeypress="return (this.innerText.length <= 0)" contenteditable="true"></div>
    </div>
</div>
<script>
    let keys = document.getElementById('keyboard-totality').querySelectorAll(".key-button");
    keys.forEach(key => {
        key.addEventListener('click', e => {
            let firstElement = document.getElementById('amo');
            if (e.target.id == 'DEL') {
                let tags = firstElement.parentNode.children;
                for(let i = tags.length -1; i>=0; i--){
                    if( tags[i].innerHTML != ""){
                        tags[i].innerHTML = "";
                        return;
                    }
                }                
            } else {
                addOnNextElement(e.target.value,firstElement);
            }
        })
    });

    function addOnNextElement(key,target){
        console.log(key);
        if(target.nextElementSibling.innerHTML == ""){
            target.nextElementSibling.innerHTML = key;
        }
        else{
            addOnNextElement(key,target.nextElementSibling);
        }
    }
</script>