Como modificar un elemento existente en HTML usando innerHTML

Como parte del curso basico de programacion, hice el maravilloso juego de Moképon, pero sentí que faltaba mas y como ya sabemos No hay que parar de aprender 🚀

Entonces hice una inscripcion de usuario donde es posible colocar el nombre que aparecera posteriormente en el dashboard de eleccion de Moképon y en el mapa de juego.

Para ello, inserte unas nuevas secciones y elementos dentro del HTML:

id="info-jugador">
                <divid="nombre-jugador">
                    ¿Cual es tu nombre, Crack?
                div>
                <divid="input-nombre">
                    "text"id="text-nombre"/>
                div>
                "submit"id="aceptar">Aceptar

Después dentro de la lógica del Javascript, nuestro <input type="text" id="text-nombre"> nos permitirá obtener el nombre o gamertag de la persona. Para ello, tenemos que disparar un evento que posteriormente nos permitira modificar el contenido del elemento

<div id="“nombre-jugador”">

1. Obtenemos el elemento que vamos a modificar:

const nombreJugador = document.getElementById('nombre-jugador')

1. Obtenemos el elemento boton “aceptar”

const botonComenzarJuego = document.getElementById('aceptar')

1. Disparamos el evento ‘click’ dentro de este boton para llamar a la funcion crearJugador

botonComenzarJuego.addEventListener('click',crearJugador)

1. Creamos la funcion crearJugador donde modificaremos lo contenido en el elemento ‘nombre-jugador’

function crearJugador(){
    if(textJugador.value == ""){
        alert('Debes darnos un nombre!')
    }else{
        nuevoJugador(textJugador.value)
        nombreJugador.innerHTML = textJugador.value
  ...
    }   
 }

Entonces, lo que el usuario coloque en el campo de texto:

Saldrá en nuestra siguiente pantalla como el elemento modificado:

No es mucho, pero es trabajo honesto 😅

</div>