Import an SQL file in MySQL using the command line/

Cómo acceder a las etiquetas que están dentro de un div (por ejemplo)

Russo

Estoy creando un juego en Html sólo para practicar. El juego es el como le llaman "ahorcado" o "verdugo". Estoy trazándolo en una etiqueta canvas con Javascript. Este es el Html:

<div class="container">    
    <div class="input">
        <canvas id="canvas" style="margin-bottom: 20px;"></canvas>
    </div>
    <div id="spans">
        
    </div>
</div>
<script src="main.js"></script>

En el div con el id = "spans" irán los span (que serán los espacios de la letra)

El Javascript es este. Aún no está terminado, por eso verán el último for incompleto.

//Base
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let container = document.getElementById("spans");
let spans = {};
//Words diccionary
let dic = ["gato","perro","columna"];

//Canvas size
canvas.width = 500;
canvas.height = 500;

//Rect draw
function generalDraw(x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
}

// Begin a new path in the canvas
let begin = ()=>{
    ctx.beginPath();
}

//Set the style of the line
let style = ()=>{
    ctx.strokeStyle = "#fff";
}

//Draw the line
let stroke = ()=>{
    ctx.stroke();
}

//Draw the head
function head(){
    begin();
    ctx.arc(canvas.width / 2, 70, 20, 0, 2 * Math.PI);
    style();
    stroke();
}

//Draw the column / body
function column(){
    begin();
    ctx.moveTo(canvas.width / 2, 90);
    ctx.lineTo(canvas.width / 2, 160);
    style();
    stroke();
}

//Draw the left arm
function leftArm(){
    begin();
    ctx.moveTo(canvas.width / 2, 100);
    ctx.lineTo(canvas.width / 2 - 30, 95);
    style();
    stroke();
}

//Draw the right arm
function rightArm(){
    begin();
    ctx.moveTo(canvas.width / 2, 100);
    ctx.lineTo(canvas.width / 2 + 30, 95);
    style();
    stroke();
}

//Draw the left leg
function leftLeg(){
    begin();
    ctx.moveTo(canvas.width / 2, 160);
    ctx.lineTo(canvas.width / 2 - 30, 190);
    style();
    stroke();
}

//Draw the right leg
function rightLeg(){
    begin();
    ctx.moveTo(canvas.width / 2, 160);
    ctx.lineTo(canvas.width / 2 + 30, 190);
    style();
    stroke();
}

//Draw the frame where the personage will hang his self
function frame(){
    ctx.beginPath();
    ctx.moveTo(50, canvas.height - 50);
    ctx.lineTo(50, 50);
    ctx.moveTo(50, 50);
    ctx.lineTo(canvas.width / 2, 50);
    ctx.strokeStyle = "#fff";
    ctx.stroke();
}

//Main function that will operate all the game
function game(){
    let word = dic[Math.floor(Math.random()*dic.length)];
    for(let i = 0; i < word.length; i++) {
        spans[`span${i}`] = document.createElement("span");
        container.appendChild(spans[`span${i}`]);
        let answer = prompt("Elige una letra");
        for (let j = 0; j < word.length - 1; j++) {
            if(answer == word[j]){
                for(let k = 0; k < container.length - 1; k++){
                    
                }
            }
            
        } 
    }
}
//Drawing the canvas base
generalDraw(0, 0, canvas.width, canvas.height, "#000");

//Drawing the frame
frame();

game();

Pondré un input o simplemente un prompt para que el usuario ingrese una letra. El problema es que no se cómo acceder a los elementos del div y hacer que si el usuario acierta una de las letras que los añada a la etiqueta spam. Que serán esas las etiquetas donde se pondrán las letras de la palabra. Se añadirá la etiqueta spam, la cantidad dependerá de la longitud de la palabra. La palabra se elegirá de manera aleatoria de la lista llamada "dic".