0

Quiero activar una función al pulsar una tecla, tengo este código pero no se porque no funciona, alguien sabe.

window.addEventListener("keydown", function change(event) {
let key = event.key

if (key == "ArrowRight") {
    document.getElementById('container').style.flexDirection = 'row';
} else if ("ArrowLeft") {
    document.getElementById('container').style.flexDirection = 'column';
}}
6
  • ¿Estas cargando el script con defer o estas haciendo un documet.ready? , proba alguna de esas opciones y comenta, proba tambien con letras simples en lugar de las flechas. El codigo parece estar bien, parece un problema de implementación. el 25 jun. 2021 a las 19:13
  • Me da un error de sintaxis en la línea 9, pero no entiendo por que. He probado a poner unos console.log para ver si cargaba bien el script y los console.log los imprimia.
    – MateoCode
    el 25 jun. 2021 a las 19:16
  • Podes poner mas código para poder verlo? el 25 jun. 2021 a las 20:01
  • Eso es todo lo que tengo, el resto de código es html, solo tengo eso de javascript
    – MateoCode
    el 25 jun. 2021 a las 20:02
  • Agregaste el defer en la cargar del JS? el 25 jun. 2021 a las 20:04

2 respuestas 2

1

Ahí encontré el error, fijate que te estaba faltando cerrar el Parentesis al final de tu función

window.addEventListener("keydown", (event) => {
  
  let key = event.key
    
  if (key == "ArrowRight") 
  {
   document.getElementById('container').style.flexDirection = 'row';
   document.getElementById('container').innerHTML = 'row';
   console.log("ArrowRight")
  } 
  
  else if (key == "ArrowLeft") 
  {
   document.getElementById('container').style.flexDirection = 'column';
   document.getElementById('container').innerHTML = 'column';
   console.log("ArrowLeft")
  }

})
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Prueba</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="index.js"></script>
</head>

<body>
    <div id="container">Contenedor</div>
</body>

</html>

0

Mira, te hice una forma un poco mas resumida de hacer lo mismo, saludos.

window.addEventListener("keydown", (event) => {
    let dir = {ArrowRight:'row',ArrowLeft:'column'}

    if (Object.keys(dir).includes(event.key)){
        document.getElementById('container').style.flexDirection = dir[event.key]
        document.getElementById('container').innerHTML = dir[event.key]
    }}
)
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Prueba</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="index.js"></script>
</head>

<body>
    <div id="container">Contenedor</div>
</body>

</html>

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.