1

El evento click funciona pero el evento keydown no. ¿Dónde está el error?

Código:

const btnAgregar = document.getElementById('boton-agregar');   // id de un button ligado a un
input en donde escribo una tarea y al accionar el evento la agrega en forma de li a una ul.


btnAgregar.addEventListener("keydown", (e) => {
if (e.key == "Enter"){
    agregarItem();
}
});


btnAgregar.addEventListener('click', agregarItem);

El problema está en el evento de keydown. Es lo único que no funciona. El resto funciona perfecto y no encuentro el error.

También probé con === en lugar de == en ese mismo evento pero tampoco funciona.

2
  • Hola, bienvenido a la comunidad. Te invito a hacer el recorrido y leer ¿cómo preguntar?. Además, para poder reproducir tu problema y encontrar una solución fácilmente nos sería de gran ayuda un ejemplo mínimo, completo y verificable. Tu código (como lo has compartido) no se puede probar. Deduzco por lo que cuentas que el problema está en que intentas leer las pulsaciones de teclas de un botón, cuando lo que deseas es leer las pulsaciones de teclas del campo de texto. Commented el 28 feb. 2023 a las 6:31
  • PD: Escribiste "Si necesitan el HTML trato de pasarlo en una respuesta", pero no deberías redactar una respuesta para compartir más datos de la pregunta. Para ello deberías usar la opción de editar pregunta que está situada bajo ella. Aunque indicas que "el foro" no te deja hacerlo, la verdad es que el límite de contenido es tan alto que no entiendo por qué piensas eso. Commented el 28 feb. 2023 a las 6:42

1 respuesta 1

3

El problema que estás sufriendo es que intentas detectar pulsaciones de teclas en un botón, cuando lo que deseas es detectar las pulsaciones en el campo de texto sobre el que escribes.

Muestro a continuación un ejemplo de cómo deberías haberlo hecho:

/* Simulamos tu función */
const agregarItem = () => console.log("Llamada");

/* El evento de pulsación de ENTER lo asociamos al campo de texto */
texto.addEventListener("keydown", (evento) => {
  if (evento.key == "Enter") {
    agregarItem();
  }
});

/* El evento de clic lo asociamos al botón */
window["boton-agregar"].addEventListener('click', agregarItem);
input[type="text"] {
  width: 20em;
}
<input type="text" id="texto" placeholder="Escribe y pulsa ENTER cuando termines" />
<button id="boton-agregar">Pulsa aquí</button>

PD: No es necesario hacer uso de getElementByID() para acceder a los elementos a través de su id. Todos estos elementos se crean automáticamente en el ámbito global (window). Puedes acceder a ellos como una variable (texto) o como una propiedad de window si usaste algún carácter especial (como el operador de resta -) accediendo a ella con window["boton-agregar"].

3
  • 1
    Precisamente las malas prácticas y no saber usar correctamente los ámbitos es lo que puede llegar a generar ese tipo de problemas. Para evitar esa situación y otras ambigüedades puedes optar por usar propiedades de window para acceder a los elementos por si id y declarar todas las variables "de uso global" con let o const para evitar que se definan en window. El problema es que muy pocos cursos o tutoriales explican qué es un ámbito, cómo se usan y en qué afectan al alcance de una variable, qué es exactamente window, etc. Commented el 28 feb. 2023 a las 8:18
  • Además (no me cabía en el comentario anterior), corrígeme si me equivoco (se me podría haber escapado en algún momento, no soy perfecto), pero nunca digo no deberías usar, si no que siempre digo que no es necesario. Commented el 28 feb. 2023 a las 8:21
  • Siempre agradezco las críticas (sobre todo si son constructivas). Creo que el que cometa ese error cometerá exactamente el mismo sobreescribiendo una variable global por una local (por ejemplo poniendo el mismo nombre a un parámetro) o acceder erróneamente a una variable de un ámbito diferente o global y no a una propiedad de la clase por no usar this. Commented el 28 feb. 2023 a las 9:30

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.