4

Estoy realizando un proyecto en el que al introducir un dato en el input deberia aparecer al menos en el console.log() para después poder trabajar con el. En mi caso introduzco un texto en un input y al pulsar enter deberia mostrarse en el console.log() el valor de mi input pero no sucede. que puedo estar haciendo erroneamente?

let nom = document.getElementById("Nombre");
const valor = document.getElementById("valor").value;
 
document.addEventListener("keyup", (event) => {
    if (event.keyCode === 13) {
        event.preventDefault();
        console.log(valor);
    }
});
<form>
            <label for="nombre">Nombre: </label>
            <input type="text" id="valor"/>
</form>

El resultado del input en el console.log() siempre es vacio

3
  • Pon el const valor = document.getElementById("valor").value; dentro del addEventListener. Sigue ocurriendo? Commented el 21 ene. 2021 a las 15:09
  • sigue ocurriendo Commented el 21 ene. 2021 a las 15:11
  • Por si se requiere, he reinciado el cache, lo he borrado entero me ha sacado hasta de mis cuentas logueadas y sigue igual Commented el 21 ene. 2021 a las 15:17

1 respuesta 1

7

let nom = document.getElementById("Nombre");
 
document.addEventListener("keyup", (event) => {
    if (event.keyCode === 13) {
        const valor = document.getElementById("valor").value;
        event.preventDefault();
        console.log(valor);
    }
});
<label for="nombre">Nombre: </label>
<input type="text" id="valor"/>

Estás definiendo una contante, esta toma el valor del input al momento de cargarse la página, por ende estará vacío, debes de definir la constante en el momento que ocurra el evento, esta será válida solo por el evento (después del bloque de evento ya no se podrá obtener), de forma que obtendremos el valor actual y no el valor inicial (el que se obtiene cuando se carga la página)

Además tienes que añadir un preventDefault para que la página no se recargue ya que estás usando un <form>

document.querySelector("form").addEventListener("submit", e => {e.preventDefault();});

Al no haber botón de submit en el <form>, la página, asume que se va a hacer el submit con el <input>


Puedes combinarlo con el form, resultando:

let nom = document.getElementById("Nombre");

document.querySelector("form").addEventListener("submit", e => {e.preventDefault();});
 
document.addEventListener("keyup", (event) => {
    if (event.keyCode === 13) {
        const valor = document.getElementById("valor").value;
        event.preventDefault();
        console.log(valor);
    }
});
<form>
  <label for="nombre">Nombre: </label>
  <input type="text" id="valor"/>
</form>

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.