Element not defined?

Question

Hi, I have just come across this problem were i can use the number variable inside the function but i cant use the image variable as element is not defined? what does that mean please as i thought my variables were global? thanks

var number = 50;
var image = document.getElementById("ball");

window.onload = function fun(){

image.style.left = number+'px';

}

Answer 1

heres what you should do:

var number = 50;
var image ;

window.onload = function fun(){
image=document.getElementById("ball");
image.style.left = number+'px';

}

declare your image variable globally..
then store your element in it after the DOM has fully loaded

Answer 2

You are doing var image = document.getElementById("ball") before the function window.onload... The most likely is that maybe the DOM was not finished been created when you tried to get the element with Id "ball". You might want to move it inside the window.onload function

Answer 3

Looks like image was referenced before the DOM is ready? maybe place the image = document.getElementById("ball") within function fun()?

Answer 4

᠌᠌brains Thanks i understand that it works inside a the parent function just wondering why this way didnt work outside of it, i think ill learn more about the DOM as im still unsure how js is interpreted its actually very diffrent compared to java becuase theres no classes 😅

Answer 5

Link the whole code, looks fine so far

Answer 6

D_Stark there are classes in java script , wish you are going to use these soon😂