Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Duda] Duda de listas y recursividad.

por Carmen Alondra Maldonado Peña
| 29.4k xp | 4 posts
No Aplica

A alguien le ha pasado que cuando agregó la recusrividad desaparecieron los textos del juego del curso loguca de programación: explorar funciones y listas:
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Este es mi código en JS:

let numeroSecreto = generarNumeroSecreto();
let intentos = 0;
let listaNumeroSorteado = [];

function asignarTextoElemento(elemento, texto) {
let elementoHTML = document.querySelector(elemento);
elementoHTML.innerHTML = texto;
return;
}

function verificarIntento() {
let numeroUsuario = parseInt(document.getElementById('valorUsuario').value);

console.log(numeroSecreto);
if (numeroUsuario === numeroSecreto) {
    asignarTextoElemento('p', `Acertaste el número en ${intentos} ${intentos === 1 ? 'vez' : 'veces'}`);
    document.getElementById('reiniciar').removeAttribute('disabled');
    //El usuario no acerto.
} else if (numeroUsuario > numeroSecreto) {
    asignarTextoElemento('p', 'El número es menor');
} else {
    asignarTextoElemento('p', 'El número es mayor');
}
intentos++;
limpiarCaja();

return;

}

function limpiarCaja() {
document.querySelector('#valorUsuario').value = '';

}

function condicionesIniciales() {
asignarTextoElemento('h1', 'Juego del número secreto');
asignarTextoElemento('p', 'Indica un número del 1 al 10');
numeroSecreto = generarNumeroSecreto();
intentos = 1;
}

function reiniciarJuego() {
//limpiar la limpiarCaja
limpiarCaja();
//Indicar mensaje de intervalo de números
//Generar el número aleatorio
//Reiniciar el contador de intentos
condicionesIniciales();
//Deshabilitar el botón de reinicio
document.querySelector('#reiniciar').setAttribute('disabled', true);

}
function generarNumeroSecreto() {
let numeroGenerado = Math.floor(Math.random() * 10)+1;
//Sí el número generado está en la lista
if (listaNumeroSorteado.includes(numeroGenerado)){
return generarNumeroSecreto();
} else {
listaNumeroSorteado.push(numeroGenerado);
return numeroGenerado
}
}

condicionesIniciales();

y este es el código de HTML:

<div class="container">
    <div class="container__contenido">
        <div class="container__informaciones">
            <div class="container__texto">
                <h1></h1>
                <p class="texto__parrafo"></p>
            </div>
            <input type="number" id="valorUsuario" min="1" max="10" class="container__input">
            <div class="chute container__botones">
                <button onclick="verificarIntento();" class="container__boton">Intentar</button>
                <button onclick="reiniciarJuego()" class="container__boton" id="reiniciar" disabled>Nuevo juego</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Una persona mirando a la izquierda" class="container__imagen-persona" />
    </div>
</div>




<script src="app.js" defer></script>

No entiendo que está pasando, no encuentro que hice mal. Según yo lo tengo como los maestros.

2 respuestas
por Carmen Alondra Maldonado Peña
| 29.4k xp | 4 posts
No Aplica

Encontré mi error, estaba en la primer declaración: let numeroSecreto = generarNumeroSecreto();
debía ser; let numeroSecreto = 0;

por Brenda Souza
| 6092.4k xp | 22299 posts
Instructor

Hola Carmen, espero que estés bien

Parece que el problema podría estar relacionado con la forma en que estás seleccionando los elementos HTML para actualizar el texto. En tu función asignarTextoElemento, estás utilizando document.querySelector(elemento), pero en tu HTML, los elementos <h1> y <p> no tienen clases o identificadores específicos para seleccionarlos correctamente.

Aquí tienes algunas sugerencias para resolver el problema:

  1. Añadir clases o identificadores: Asegúrate de que los elementos que deseas modificar tengan identificadores o clases específicas para que puedas seleccionarlos correctamente. Por ejemplo:

    <h1 id="titulo"></h1>
<p id="mensaje" class="texto__parrafo"></p>

  2. Actualizar la función asignarTextoElemento: Cambia la forma en que seleccionas los elementos en tu función. Por ejemplo:

    function asignarTextoElemento(elemento, texto) {
    let elementoHTML = document.getElementById(elemento);
    elementoHTML.innerHTML = texto;
}

  3. Llamar a la función con los identificadores correctos: Asegúrate de que estás llamando a la función asignarTextoElemento con los identificadores correctos:

    function condicionesIniciales() {
    asignarTextoElemento('titulo', 'Juego del número secreto');
    asignarTextoElemento('mensaje', 'Indica un número del 1 al 10');
    numeroSecreto = generarNumeroSecreto();
    intentos = 1;
}

Con estos cambios, deberías poder ver los textos correctamente en tu juego. Espero que esto te ayude a resolver el problema. ¡Buena suerte con tu proyecto!

Espero haber ayudado y buenos estudios!