Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type &#0-CodePudding

I am new to Javascript and I can't figure out why am I getting this error. Here is my code:

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 >
        <div  id="bckg">
            <div ></div>
            <div ></div>
        </div>
    </div>
</body>
</html>

This error I get in Mozilla: "Uncaught TypeError: Window.getComputedStyle: Argument 1 is not an object." What could it be?

CodePudding user response：

Your script tag needs to be moved to the last of the body. The script loaded to early. If you read the error message. It couldnt find the argument

<!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 >
        <div  id="bckg">
            <div ></div>
            <div > 
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

Delta Boukensha is right - your document hasn't finished loading. So either put your script at the bottom of your markup as Delta suggests or use a utility function to run code once the document has rendered such as :

function whenDOMready( func ) {
  switch( String( document.readyState ) ) {
    case "complete":
    case "loaded":
    case "interactive":
      func();
      break;
    default:
      window.addEventListener("DOMContentLoaded", (e) => func());
  }
}

Then call it from wherever you want like this :

let bckg;
let compStyle;

function domReady() {
    bckg = document.querySelector(".bckg");
    compStyle = getComputedStyle(bckg);
}

whenDOMready( domReady );