Can anyone tell me the reason why suddenly I am facing this problem?

Question

I have simple code:

var aso=document.querySelector("body");
aso.style.background="yellow";

This is written in separate .js file. When you open the page, it is showing error:

simple.js:2 Uncaught TypeError: Cannot read property 'style' of null
    at simple.js:2

But when I run this code in console window, it works fine, but showing error in separate JS file.

make sure you run this code after document load complete. – Madhawa Priyashantha Sep 06 '20 at 07:20 — Madhawa Priyashantha, Sep 06 '20 at 07:20

score 0 · Answer 1 · answered Sep 06 '20 at 07:21

0

It is probably because you are linking your JS file in the HTML file before the DOM is loaded, so your query selector can't find desired element.

Try to move your <script> tag to the bottom of the HTML file.

answered Sep 06 '20 at 07:21

Petr Jelínek

694
4
22

Thnku for clearing a basic problem – Md Ashraf Sep 06 '20 at 10:01

score 0 · Answer 2 · answered Sep 06 '20 at 07:26

its a dom problem you must run scripts after dom loaded there are many ways to execute js functions after dom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    // self executing function here
    (function() {
       // your page initialization code here
       // the DOM will be available here
        var aso=document.querySelector("body");
        aso.style.background="yellow";
    })();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
    var aso=document.querySelector("body");
        aso.style.background="yellow";
});
</script>
</body>
</html>

Can anyone tell me the reason why suddenly I am facing this problem?

2 Answers2