DOM not working. Why this error ?

Question

I'm trying to change the color on user click using global variable but I'm not sure where im doing wrong 😥
https://code.sololearn.com/WqcX2Xlrgwjx/?ref=app

Answer 1

DOM cant access your element because the script tag is automatically added on the head tag on sololearn.

the DOM would create the structure from top to bottom so when it reached the script tag first it would run your script but wait, you already wanted to access the DOM object b4 it even reached the body tag. causing it to reach an exception error.

so one of the solutions is to put the script tag under body so that the DOM structure has been established before accessing it. but no professional actually does that. what you should do is to use the
window.onload method to run the function only after DOM finished parsing the structure of your HTML so your js should be

window.onload = start
var fo; //global variable

function start(){
fo=document.getElementById("tst");
}

function test(){
fo.style.color="blue";
}

Answer 2

Use Script tag and define whole Js in that and see,It's working
I edit and try

https://code.sololearn.com/Wr7YapZPD6Ey/?ref=app

Answer 3

ÃKR Abhay also Right✓
Use all your variable inside the Function and it's working

Answer 4

Do

function test(){
tst.style.color="blue";
}

Answer 5

https://code.sololearn.com/W5ewdKzJ7oIE/?ref=app

if you don't want to write js in html file ,you can pass id value as Argument to function and then select it inside function.

Something like this

#in html file
onclick='test("tst")'

#in js file
function test(tst){

var f=document.getElementById(tst);
f.style.color="blue";

}

Edit: since id is unique it is available globally and so instead of selecting it through document . getElement... You can directly refer the element by its id name like ÃKR did but it's not a good idea as it's not clear enough where that tst came from and also if attributes and methods of window object and other objects loaded from external scripts have same name ,it won't work

Answer 6

Window.onload

Answer 7

Faq

Answer 8

function test(){
var forus = document.querySelector("#tst");
forus.style.color = "green";
}

IT WORKS AFTER

Answer 9

Variables must be included inthe function.

Answer 10

function test(){
var fo = document.getElementById("tst");
fo.style.color="blue";
}

Try this way bro

Answer 11

Do

HTML =

This code here ..............?

It will start working again

Answer 12

丹ⓨㄩک廾
De Villiers
🔰 Justin 🔰
Help plz 🙏

Answer 13

KINGDX But I don't want to do that

If I declare the var outside the Function then it could be used globally isn't it?

Answer 14

Now write [Solved] before the question so others will know from outside that it's solved.😎

Answer 15

Declare your var inside the function :
function test(){
var fo=document.getElementById("tst");
fo.style.color="blue";
}

Answer 16

It is possible by defining the variable inside the function

Answer 17

//paste this in the JavaScript section

document.addEventListener(
"DOMContentLoaded",
function(){
test()
});

function test(){
var fo=document.getElementById("tst");
fo.style.color="blue";
}

Answer 18

Atomic Wave
This code automatically changes the color to blue, while in the HTML code the change is when clicking on the text

Answer 19

Just put the variable inside the function.

Answer 20

https://code.sololearn.com/WQ4iPyPk88yH/?ref=app