getElementById() work in html file but not in js file

Question

i cannot find answer to my question in someone else post so here it is: getElementById return null in java script file (also while testing in console) but work in html file

HTML file

<!DOCTYPE html>
<html>
   <head>
      <title>Title</title>
      <link rel="stylesheet" href="css/style.css">
      <script src="js/app.js"></script>

   </head>
   <body>

      <p id="stuff">Some text</p>

   </body>
</html>

JS file

var title = document.getElementById('stuff');
console.log(title);
title.style.color = "#D4F34A";

Because when the script runs, the element does not yet exist in the DOM. — jmoerdyk, Jul 12 '18 at 15:21
@zero298 is it correct to link js file in lat line befor
? it works only then — xyz, Jul 12 '18 at 15:24
Use the `DOMContentLoaded` event in your script file to execute the code once it fires, documentation (https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) — Ryan Wilson, Jul 12 '18 at 15:24
@AdamBrinded can you tell me how? i just started learning html, css and js a couple of days ago so i'm not sure how to do it — xyz, Jul 12 '18 at 15:25

score 1 · Accepted Answer · answered Jul 12 '18 at 15:27

1

You can add a callback function for the document event DOMContentLoaded event like so, and inside that function do your desired code:

//Add this into your script file, and anything you want to have execute once the document
//is fully loaded go inside of the function
document.addEventListener("DOMContentLoaded", function(event) {
    var title = document.getElementById('stuff');
    console.log(title);
    title.style.color = "#D4F34A";
});

answered Jul 12 '18 at 15:27

Ryan Wilson

7,490
1
17
31

it's working, thanks! – xyz Jul 12 '18 at 15:30
@martyna You're welcome. If you feel this answer is good, please mark it as the accepted answer. – Ryan Wilson Jul 12 '18 at 15:32

getElementById() work in html file but not in js file

1 Answers1