Soy nuevo en Javascript y no puedo entender por qué recibo este error. Aquí está mi código:
const bckg = document.querySelector(".bckg"); const compStyle = getComputedStyle(bckg); body { box-sizing: content-box; position: relative; } .visible { position: relative; top: 50px; margin: auto; background-color: bisque; height: 300px; width: 600px; overflow: hidden; } .bckg { position: absolute; left: 0px; width: 1200px; height: 300px; background-image: url("bckg.jpg") } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>New Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <script src="script.js"></script> <div class="visible"> <div class="bckg" id="bckg"> <div class="player"></div> <div class="obstacle"></div> </div> </div> </body> </html>Este error aparece en Mozilla: "Error de tipo no detectado: Window.getComputedStyle: el argumento 1 no es un objeto". ¿Qué podría ser?
Su etiqueta de secuencia de comandos debe moverse al final del cuerpo. El script se cargó demasiado temprano.
Este error aparece en Mozilla: "Error de tipo no detectado: Window.getComputedStyle: el argumento 1 no es un objeto". ¿Qué podría ser?
Si lee el mensaje de error, dice que no pudo encontrar el argumento.
La razón de esto es que los navegadores cargan las etiquetas de JavaScript de forma síncrona. Ha sido un estándar desde que se introdujo JavaScript por primera vez.
Fragmento de solución
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>New Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="visible"> <div class="bckg" id="bckg"> <div class="player"></div> <div class="obstacle"> </div> </div> </div> <!-- I moved the script to the end of the body --> <script src="script.js"></script> </body> </html>Al agregar un archivo console.log, podría haber visto que el argumento para Window.getComputedStyle no es un objeto
const bckg = document.querySelector(".bckg"); console.log(bckg); // will return undefinedTambién puede probar el atributo "aplazar", sin embargo, ha sido una buena práctica mover las etiquetas del script al final del cuerpo para que sean compatibles con diferentes navegadores antiguos. Consulte https://www.w3schools.com/tags/att_script_defer.asp
Otra alternativa es usar el evento "DOMContentLoaded" https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
document.addEventListener("DOMContentLoaded", function() { // code... });Delta Boukensha tiene razón: su documento no ha terminado de cargarse. Entonces, coloque su secuencia de comandos en la parte inferior de su marcado como sugiere Delta o use una función de utilidad para ejecutar el código una vez que el documento se haya procesado, como:
function whenDOMready( func ) { switch( String( document.readyState ) ) { case "complete": case "loaded": case "interactive": func(); break; default: window.addEventListener("DOMContentLoaded", (e) => func()); } }Luego llámalo desde donde quieras así:
let bckg; let compStyle; function domReady() { bckg = document.querySelector(".bckg"); compStyle = getComputedStyle(bckg); /* ...other code here */ } whenDOMready( domReady );Hay dos beneficios que le brinda esta utilidad: