1

Estaba haciendo un juego para practicar JS; necesito que el botón de reinicio inicie de nuevo el ciclo como si diera un refresh a la página. Ya hice funcionar todo, solo necesito este último botón al pie de la caja.

let intentos = 3;

function revisarIntento (){ //Las funciones son reusables, por si necesitas correrlo varias veces
    let miIntento = Number(adivina.value) ; //Se accede al valor previamente añadido al HTML usando el .value
    const numeroAleatorio = Math.floor(Math.random() * 10) + 1;
    console.log('Numero Aleatorio', numeroAleatorio); //Pal debug

    if (miIntento!== numeroAleatorio) { //Primero comparar el numero que se ingresa con el que se genero con un booleano
        intentos--
        retorno.textContent = "Tu intento fue " + miIntento + ". El numero es incorrecto. Intentalo de nuevo."; // El .textContent se usa para acceder al elemento y poner el texto que quiero.
        numeroIntentos.textContent = "Intentos restantes: " + intentos;
        if (intentos < 1){
            retorno.textContent = "Pasaste el numero de intentos. El juego se terminó";
            intentos = 4;
        }
    } else {
        retorno.textContent = "Acertaste" ;
    }
}
ingresar.addEventListener('click', revisarIntento) // Usando el ID + addEventListener le decimos a JS que evento debe realizar.

function reinicio(){  
    document.getElementById("tAgain").reset();  
}

tAgain.addEventListener('click', reinicio)
body {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: linear-gradient(120deg, #2980b9, #8e44ad);
    height: 100vh;
    overflow: hidden;
}

.caja{
    position: absolute;
    padding: 10px 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background: white;
    border-radius: 15px;
}

.caja h1{
    text-align: center;
    padding: 0 0 20px 0;
    border-bottom: 1px solid silver;
}

input[type="submit"]{
    width: 30%;
    height: 25px;
    border: .3px solid;
    background: #2691d9;
    border-radius: 10px;
    font-size: auto;
    color: #e9f4fb;
    font-weight: 200;
    cursor: pointer;
    outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adivina adivinador</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="caja">
        <h1>Adivina que numero pienso</h1>
        <p>Estoy pensando en un numero del 1 al 10. ¿Puedes adivinar cual es?</p>

        <div class="datos">
            <label for="adivina">Mi intento</label>
            <input type="text" id="adivina">
            <input type="submit" id="ingresar" value="Revisa mi intento">

            <p id="retorno"></p>
            <p id="numeroIntentos">Intentos restantes: 3 </p>
        </div>
        <div id="jugarOtra">
            <p>¿Quieres jugar de nuevo?</p>
            <input type="submit" id="tAgain" value="Reiniciar">
        </div>
    </div>
</body>
<script src="js/script.js"></script>
</html>

3
  • ¿Te refieres a poner esto al final de la función revisarIntento()? document.getElementById("adivina").value = ""
    – masterguru
    Commented el 14 mar. 2022 a las 16:06
  • No, me refiero a que quiero que el botón haga lo mismo que haría el "Refresh" en el navegador con el boton: <input type="submit" id="tAgain" value="Reiniciar"> Commented el 14 mar. 2022 a las 16:08
  • ¿un window.location.href a la misma url donde estas? Agregaselo a la funcion reinicio pues y quita lo del reset() que da error y estropea lo que ocurra despues.
    – masterguru
    Commented el 14 mar. 2022 a las 16:14

1 respuesta 1

1

Prueba con esto:

function reinicio(){  
    location.reload()
}

Tal como dice su documentación:

El metodo location.reload() carga de nuevo la URL actual, como lo hace el boton de Refresh de los navegadores.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.