0

Se da el error mencionado en el título del post, se supone que no puede encontrar la etiqueta de html de: #nave, pero está definida sin errores de escritura, no se que puede ser.

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="javascript.js"></script>
</head>
<body>
    <div id="nave">h</div>
</body>
</html>
<!-- CSS -->
*{
    margin: 0%;
    padding: 0%;
}
#nave{
    width: 200px;
    height: 100px;
    background: blue;
    margin-top: 790px;
    margin-left: 80px;
    margin-right: 0px;
}
<!-- Javascript -->
var modifier= 5;
var movement = document.getElementById("#nave");
var movedor = document.addEventListener("keydown", (event) => {
var {style} = movement;
switch (event.key) {
case "ArrowLeft": style.marginLeft = "${parseInt(style.marginLeft) - modifier}px"; break;
case "ArrowRight": style.marginLeft = "${parseInt(style.marginRight) + modifier}px"; break;
    }
  }
);

JSADDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

6
  • ¿Esto que crees que hace? --> 'var {style} = movement; Yo es que no lo entiendo, la verdad, pero quizás si que es algo.
    – masterguru
    Commented el 7 mar. 2022 a las 18:43
  • selecciona los estilos css de la variable movement que a su vez interacciona con el id #nave Commented el 7 mar. 2022 a las 19:28
  • Además de lo que te mencionó Martin en su respuesta: puede que el DOM aún no se haya cargado completamente cuando llamás al script, por lo tanto: o llamás al script antes de cerrar el <body>, o envolvés tu código en un evento DOMContentLoaded.
    – padaleiana
    Commented el 7 mar. 2022 a las 19:36
  • No se, veo errores tipográficos por todas partes... ¿arrowLeft no deberia ser ArrowLeft? ¿Y arrowReft no deberia ser ArrowRight? ¿Y en javascript las propiedades de los estilos de los elementos no van sin guiones y en camelCase? Eso me parece haber oido alguna vez en alguna parte. Por cierto, tu error no lo consigo reproducir, a mi no me da nada mal. ¿Quizas falta algo de código en tu pregunta?
    – masterguru
    Commented el 7 mar. 2022 a las 19:50
  • Acabo de corregir los errores de escritura, pero sigue dando el mismo error Commented el 8 mar. 2022 a las 13:00

2 respuestas 2

0

var movement = document.getElementById("nave"); Proba poniendolo asi, porque ya le estas indicando que el elemento a utilizar es un ID asi que creo que no hace falta el #

1
0

La página se carga línea por línea. El script está antes que el elemento al que intentas acceder. Por lo tanto el body no se cargó completamente y el script no es capaz de encontrar el elemento.

Esto se soluciona poniendo el script al final del body:

<body>
    <div id="nave">h</div>
    <script src="javascript.js"></script>
</body>

Por otra parte, como te respondió @Martin, al usar getElementById solo debes ingresar el ID. Sin #.

La alternativa que si lo requiere es querySelector y querySelectorAll porque usan selectores css para encontrar el elemento.

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.