DOM not working. Why this error ? | SoloLearn: Learn to code for FREE!

+7

DOM not working. Why this error ?

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

dom

10/23/2020 9:14:21 AM

Jeffly

27 Answers

New Answer

+6

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"; }

+17

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

+17

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

+12

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

+6

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

+5

+5

Window.onload

+4

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

+4

Do HTML = This code here ..............? It will start working again

+3

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

+3

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?

+3

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

+1

Write javascript inside script tag

+1

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

+1

//paste this in the JavaScript section document.addEventListener( "DOMContentLoaded", function(){ test() }); function test(){ var fo=document.getElementById("tst"); fo.style.color="blue"; }

+1

Just put the variable inside the function.

+1

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

+1

Variables must be included inthe function.

+1

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

0

It is possible by defining the variable inside the function