var kidX = ""; if(kidX == ""){ kidX = 100; } document.addEventListener('keydown', function(event) { if(event.keyCode == 37) { kidX--; document.getElementById("kid").style.transform = "translateX(kidX + "px")"; console.log(document.getElementById("kid").style.transform); } else if(event.keyCode == 39) { kidX++; document.getElementById("kid").style.transform = "translateX(kidX + "px")"; // console.log(kidX + "px"); console.log(document.getElementById("kid").style.transform); } }); <!DOCTYPE html> <html> <head> </head> <style> img{ height = 100px; } .guy{ height = 100px; } div{ height = 100px; } </style> <body id="body"> <p > <div id="kid"> <img class = "guy" src="kid.png" alt="kid!" height = "100px" /> <p> hello </p> </div> <p> </body></html>Hola. Quiero hacer que el niño del elemento se mueva con las teclas de flecha, pero creo que lo estoy formateando mal. Alguien me puede decir como formatear correctamente, gracias. Si hay una mejor manera de hacer que el niño del elemento se mueva hacia la izquierda y hacia la derecha, por favor dígame. Soy nuevo en JavaScript y html, por lo que se agradece cualquier ayuda.