Help me to fix this error

Question

I am createing a basic javascript game (cherome dinasour)
Code =>
function over(){
var elem = document.getElementById('player')
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("top");
}
over()

Error => Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Answer 1

either you don't have an element with id equals to 'player', or it has not been parsed when the code is executed ^^

Answer 2

if you execute your code from the js tab of a web project code playground from the (at least android) app', it is added to the html (inside a script tag) head before running... so DOM doesn't contains any of the body elements as they are not yet parsed (js scripts are executed as soon as encountered).

to fix that, you must to call your 'over' function (and attempt to access to DOM) only when DOM has been populated... the shortest way would be to do:

onload = () => {
over();
};

Answer 3

put inside this function at least all codes wich need to access the DOM and doesn't require to be in global scope...

however, good practice would be to not use the global scope ^^

only function calls are required to be inside (they could be declared in global scope), but variables wich require to be in global scope and need to be initialized with DOM references should be declared outside and initialized inside