8
respuestas

por Estudiante

| 87.6k xp | 18 posts

Buenas noches me gustaría saber que código podría aplicar en el programa para que al oprimir la tecla "Enter", ingrese el valor sin tener que hacerle click al botón. Gracias

<meta charset="UTF-8">

<input/>
<button>Verificar si acerto el reto</button>

<script>
    var secreto= 5;
    var input=document.querySelector("input");
    function verificar(){
        if(parseInt(input.value)==secreto){
        alert("usted acerto");
        }
        else{
        alert("usted erro");
        }
    }
    var button=document.querySelector("button");
    button.onclick=verificar;

</script>

8 respuestas

por Leonardo Ariel D'Ulivo

| 61.4k xp | 45 posts

22/04/2022

Hola,

Una de las soluciones es envolver el input y el button con un form (formulario), sin entrar en tantos detalles. Ejemplo:

    <form>
        <input/>
        <button>Verificar si acerto el reto</button>
    </form>

Observa, que al presionar enter, la página carga nuevamente (es muy rápido, pero lo hace).

Para prevenir esta carga, otra posible solución (digo posible, porque en programación hay más de una forma de solucionar las cosas) es utilizar preventDefault dentro de la etiqueta form. Ejemplo:

    <form onsubmit="event.preventDefault()">
        <input/>
        <button>Verificar si acerto el reto</button>
    </form>

Lo correcto en agregar un type="submit" dentro del botón. Ejemplo:

    <form onsubmit="event.preventDefault()">
        <input/>
        <button type="submit">Verificar si acerto el reto</button>
    </form>

Saludos.

por Estudiante

| 87.6k xp | 18 posts

22/04/2022

muchas gracias solucionado, pero ahora ejecutando el programa resulta que siempre acierta en un mismo valor randomico, ejemplo: 7

por Leonardo Ariel D'Ulivo

| 61.4k xp | 45 posts

22/04/2022

podrías pasar todo el código por favor?

Mira, este es tu código, más mi sugerencia:

<!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>Document</title>
</head>
<body>

    <form onsubmit="event.preventDefault()">
        <input/>
        <button type="submit">Verificar si acerto el reto</button>
    </form>

<script>
    var secreto= 5;
    var input=document.querySelector("input");
    function verificar(){
        if(parseInt(input.value)==secreto){
        alert("usted acerto");
        }
        else{
        alert("usted erro");
        }
    }
    var button=document.querySelector("button");
    button.onclick=verificar;

</script>
</body>
</html>

Otra forma es llamando una función:

En el siguiente ejemplo, se llama a la función NoAction (puedes inventar el nombre de la función que desees).

*Nota: punto a favor de llamar a una función, es que puedes hacer más tareas dentro de ella. *

<!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>Document</title>
</head>
<body>

    <form onsubmit="NoAction(event)">
        <input/>
        <button type="submit">Verificar si acerto el reto</button>
    </form>

<script>
    var secreto= 5;
    var input=document.querySelector("input");
    function verificar(){
        if(parseInt(input.value)==secreto){
        alert("usted acerto");
        }
        else{
        alert("usted erro");
        }
    }
    var button=document.querySelector("button");
    button.onclick=verificar;

    const NoAction = (e) => {
        e.preventDefault(); //esta acción siempre al principio de la función del onsubmit (para los <form>)

        /*
            esto es un ejemplo de tareas que se pueden agregar
            dentro de una función.
        */
        input.value = "";   // limpio el input.
        input.onfocus;      // pongo el cursor en el input.
    }

</script>
</body>
</html>

Saludos.

por Estudiante

| 87.6k xp | 18 posts

22/04/2022

Muchas gracias ,a continuación te comparto mi código, quedo atento a tus importantes sugerencias.

<meta charset="UTF-8">

    <form onsubmit="event.preventDefault()">
        <input/>
        <button type="submit">Verificar si acerto el reto</button>
    </form>

<script>
    var secreto= Math.round(Math.random()*10);
    var input=document.querySelector("input");
    input.focus();
    function verificar(){
        if(parseInt(input.value)==secreto){
        alert("usted acerto");
        }
        else{
        alert("usted erro");
        }

    input.value = "";
    input.focus();
    }
    var button=document.querySelector("button");
    button.onclick=verificar;

</script>

por Leonardo Ariel D'Ulivo

| 61.4k xp | 45 posts

22/04/2022

Tu código funciona perfecto!

el tema está en que al principio, en tu código inicial de este post, la variable secreto siempre tenia el valor de 5:

<script>
    var secreto= 5;

Ahora, tu variable secreto puede tomar cualquier valor, ya que la función Math.round(Math.random()*10) asigna cualquier valor.

Una solución a ello es que puedas ver que valor tiene la variable secreto el momento de fallar. Por ejemplo modificando el alert dentro del else :

else{
        alert("usted erro" + " el número secreto es: " + secreto);
        }

De esta manera, cuando falles, podrás ver que número tenía secreto.

por Estudiante

| 87.6k xp | 18 posts

22/04/2022

Leonardo muchas gracias pero al ejecutar el programa sigue acertando solo con un numero dentro del random, muy raro pero bueno . te agradezco mucho

por Hector Mauricio Chavez Piñeros

| 22.1k xp | 42 posts

23/04/2022

hola compañeros me puse a revisar codigo y en modo programador no arroja error, que sera , siempre establece el mismo numero

<form onsubmit="event.preventDefault()">
    <input/>
    <button type="submit">Verificar si acerto el reto</button>
</form>

por Hector Mauricio Chavez Piñeros

| 22.1k xp | 42 posts

23/04/2022

Hola compañeros ya encontre el error la pagina toca actualizarla no habia caido en cuenta y el codigo funciona ok