Skip to content
Advertisement

Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’ I am getting this error

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 class="visible">
        <div class="bckg" id="bckg">
            <div class="player"></div>
            <div class="obstacle"></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?

Advertisement

Answer

Your script tag needs to be moved to the very end of the body. The script loaded to early.

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

If you read the error message it says it could not find the argument.

The reason for this is that browsers loads JavaScript tags synchronously. It has been a standard since JavaScript was first introduced.

Solution snippet

<!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>

Adding a console.log you could have seen that the argument for Window.getComputedStyle is indeed not an object

const bckg = document.querySelector(".bckg");
console.log(bckg); // will return undefined

You can also try out the “defer” attribute, however it has been best practice to move the script tags to the end of the body for compatibility with different older browsers. See https://www.w3schools.com/tags/att_script_defer.asp

Another alternative is to use the “DOMContentLoaded” event https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

document.addEventListener("DOMContentLoaded", function() {
  // code...
});
Advertisement