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);

JavaScript
​x
 
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")
}

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

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

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>

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

JavaScript
 
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...
});

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

Advertisement

Answer