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

Question

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

7.9k Views Asked by Mujcinov At 04 April 2025 at 22:41

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?

Original Q&A

There are 2 best solutions below

rushkeldon On 22 April 2022 at 23:55

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);
    /* ...other code here */
}

whenDOMready( domReady );

There are two benefits this utility gives you :

No matter when you call it it will work - either calling your function (func) immediately or when the DOMContentLoaded event fires. If you just add the event listener directly you have to worry about if it has already fired or not.
You are guaranteed that your DOM is ready for inspection and access.

**Delta Boukensha** · Accepted 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...
});

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in QUERYSELECTOR

Related Questions in GETCOMPUTEDSTYLE

Trending Questions

Popular # Hahtags

Popular Questions