Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
0
respuestas

[Sugerencia] Deshabilitar botón

Buenas! me entretuve bastante con la actividad, excelentes profesores y la forma de enseñar. La única observación que tengopara terminar el juego de manera completa y que faltó, sería:

  • deshabilitar el botón intentar una vez que ganaste;
  • y habilitarlo al reiniciar,

(en el DOM agregue una 'id' al boton intentar para identificarlo)

asi lo hice index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>JS Game</title>
</head>

<body>

    <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();" id="botonIntentar" class="container__boton">Intentar</button>
                    <button class="container__boton" onclick="reiniciarJuego();" 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>
</body>

</html>

app.js

let numeroSecreto = generarNumeroSecreto();
let intentos = 1;



function verificarIntento(){
    let numeroUsuario = parseInt(document.getElementById('valorUsuario').value);
    
    console.log(intentos);
    if(numeroUsuario === numeroSecreto){
        asignarTextoElemento('p',`¡Acertaste el número secreto en ${intentos} ${(intentos === 1) ? 'vez': 'veces'}!`);
        document.getElementById('reiniciar').removeAttribute('disabled');
        document.getElementById('botonIntentar').setAttribute('disabled','true'); //deshabilitar boton intentar
    } else{
        if(numeroUsuario > numeroSecreto){
            asignarTextoElemento('p','El número secreto es menor');
        }else{
            asignarTextoElemento('p','El número secreto es mayor');
        }
        limpiarCaja();
        intentos++;
    }
    return;
};

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

}


function condicionesIniciales(){
    limpiarCaja();
    mensajesIniciales();
    numeroSecreto = generarNumeroSecreto();
    intentos = 1;
}

function reiniciarJuego(){
    //limpiar la caja
    limpiarCaja();
    //Inicializar el numero Intento
    //Indicar mensaje de intervalo de números
    //Generar número aleatorio
    condicionesIniciales();
    document.querySelector('#reiniciar').setAttribute('disabled','true');//Deshabilitar botón Nuevo Intento
    document.querySelector('#botonIntentar').removeAttribute('disabled');//habilitamos botón Intentar
    
}
function asignarTextoElemento(elemento, texto){
    let elementoHTML = document.querySelector(elemento);
    elementoHTML.innerHTML = texto;
};

function generarNumeroSecreto(){
    return Math.floor(Math.random()*10)+1;

}


function mensajesIniciales(){
    asignarTextoElemento('h1','Juego del</br>Número secreto');
    asignarTextoElemento('p','Escoje un numero del 1 al 10');
}

mensajesIniciales();


saludos!