Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Lógica de programación: explorar funciones y listas - Clase: 04 Arreglos: Recursividad

Tengo un problema en el procedimiento que se realiza en ese capitulo, ya que al agregar el código que se hace en esta clase, el programa deja de mostrar los mensajes en el HTML y pareciese que el programa dejase de funcionar por completo. Estos es mi código:

let numeroSecreto = generarNumeroSecreto();
let intentos = 1;
let listaNumerosSorteados = [];  // Lista que almacenara los números aleatoreos sorteados.


// HTML tipo "header"
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Juego del Número Secreto';

let texto = document.querySelector('p');
texto.innerHTML = 'Indica un número del 1 al 10.';


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



function verificarIntento() {
    let numeroDeUsuario = parseInt(document.getElementById('valorUsuario').value);
    
    if (numeroDeUsuario === numeroSecreto) {
        asignarTextoElemento('p',`Acertaste el número en ${intentos} ${(intentos === 1) ? 'vez' : 'veces'}`);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        //El usuario no acertó.
        if (numeroDeUsuario > numeroSecreto) {
            asignarTextoElemento('p','El número secreto es menor');
        } else {
            asignarTextoElemento('p','El número secreto es mayor');
        }
        intentos++;
        limpiarCaja();
    }
    return;
}

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

function generarNumeroSecreto() {
    // let numeroGenerado = Math.floor(Math.random()*10)+1;
    let numeroGenerado = Math.floor(Math.random()*10+1);
    console.log(numeroGenerado);
    console.log(listaNumerosSorteados);

    // Preguntarnos: ¿Ese número esta en la lista? ==> Para hacer una cosa u otra.
    // if(nombreArreglo.includes(valorBuscar))
    if (listaNumerosSorteados.includes(numeroGenerado)){
        return generarNumeroSecreto();
    }
    else{
        listaNumerosSorteados.push(numeroGenerado);
        return numeroGenerado;
    }
}

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

function reiniciarJuego() {
    //limpiar caja
    limpiarCaja();
    //Indicar mensaje de intervalo de números 
    //Generar el número aleatorio
    //Inicializar el número intentos
    condicionesIniciales();
    //Deshabilitar el botón de nuevo juego
    document.querySelector('#reiniciar').setAttribute('disabled','true');
    
}

condicionesIniciales();

Agradecería si alguien puede ayudarme a encontrar cual o cuales son los errores que tengo en mi código.

1 respuesta

¡Hola Daniel!

Entiendo que estás teniendo problemas con tu código y que el programa parece dejar de funcionar cuando agregas el código de la clase. Vamos a revisar algunos puntos que podrían estar causando el problema:

  1. Verifica los selectores de elementos HTML: Asegúrate de que los elementos que estás seleccionando con document.querySelector y document.getElementById realmente existen en tu HTML. Por ejemplo, verifica que tienes un elemento con el ID valorUsuario y un botón con el ID reiniciar.

  2. Errores en la consola: Abre la consola de tu navegador (normalmente con F12 o Ctrl+Shift+I) y verifica si hay algún error que pueda estar interrumpiendo la ejecución del script. Los errores de JavaScript suelen detener la ejecución del código.

  3. Llamadas recursivas en generarNumeroSecreto: La función generarNumeroSecreto puede entrar en un bucle recursivo si todos los números del 1 al 10 ya están en listaNumerosSorteados. Asegúrate de que el tamaño de listaNumerosSorteados no llegue a 10 antes de reiniciar el juego. Podrías agregar una condición para manejar este caso.

  4. Inicialización del juego: Asegúrate de que la función condicionesIniciales se llama correctamente al cargar la página. Esto inicializa el número secreto y los intentos, lo cual es crucial para el funcionamiento del juego.

  5. Interacción con el HTML: Si el texto no se está actualizando como esperas, asegúrate de que la función asignarTextoElemento está siendo llamada con los argumentos correctos y que los elementos HTML existen.

Aquí tienes un ejemplo de cómo podrías verificar algunos de estos puntos:

<!-- Asegúrate de tener este HTML básico -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Juego del Número Secreto</title>
</head>
<body>
    <h1></h1>
    <p></p>
    <input type="number" id="valorUsuario">
    <button id="reiniciar" disabled>Reiniciar</button>
    <script src="tu-script.js"></script>
</body>
</html>

Espero que estos consejos te ayuden a encontrar y solucionar el problema.