Tengo algo de JavaScript que no funciona:
const player = document.getElementById("player"); console.log(player); var positionX = 600; var positionY = 200; document.onkeypress = function move(e) { console.log(e.key); let keyPressed = e.key; if (keyPressed == 'w') { positionY--; player.style.top = positionY + 'px'; console.log(player); } };Y en la consola, la variable 'jugador' se imprime como 'nula' cuando he intentado configurarlo en el div 'jugador' en mi Html.
Aquí está el html:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Movement</title> <link rel="stylesheet" href="index.css"> <script src="index.js" charset="utf-8"></script> </head> <body> <div id="player"></div> </body> </html>También aparece un error:
index.js:12 Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLDocument.move (index.js:12:12) move @ index.js:12¿Alguien me puede ayudar?
Esto se debe a que su JavaScript busca el elemento antes de que se represente el DOM, por lo que la variable del player es null .
Puede agregar el script después del player div:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Movement</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="player"></div> <script src="index.js" charset="utf-8"></script> </body> </html>o esperar a que se procese el DOM con
document.addEventListener("DOMContentLoaded", () => { const player = document.getElementById("player"); console.log(player); var positionX = 600; var positionY = 200; document.onkeypress = function move(e) { console.log(e.key); let keyPressed = e.key; if (keyPressed == 'w') { positionY--; player.style.top = positionY + 'px'; console.log(player); } }; });Deberías poner tu script dentro de window.onload()
Ejemplo :
window.onload = () => { /* put you script here */ }O llame a su archivo js en la parte inferior de HTML
¡Porque tu secuencia de comandos se ejecutó antes de que todo el elemento html estuviera listo!