I am beginner and facing problem with Javascript and html linkage. Can't see the effect of Javascript in HTML

Question

I have created an admin.html file where I have div classes inside the h1 tag. I have connected the admin.js file using the script: src but the thing is not able to see the effect when I change color in Javascript, but the same code working when I inspect in Chrome. Help appreciated.

admin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <link rel="stylesheet" href="style2.css">
    <script src="admin.js"></script>  
</head>
<body>
  <ul class="list"> 
    <li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a  href="#dashbord">Dashboard</a></li>
    <br>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
</body>
</html>

admin.js

const q = document.querySelector('.div h2');
 q.style.color = 'red';

Move the `script` tag to the end of the `body`. Some frameworks like Webpack add the `script` tag to the head and add `defer` but I'm not sure if this always works. — , May 26 '21 at 12:27
Naming classes after standard element types is pretty confusing. I don't recommend you do that. Also learn how to use the developer tools in your browser. The error message your code prints is a useful search term to type into Google. — Quentin, May 26 '21 at 12:28

score 0 · Accepted Answer · answered May 26 '21 at 12:28

The reason is that the script is parsed and evaluated before the HTML file is read and the DOM is built. The DOM elements don't exist at that moment.

Move the script tag to the end of the body.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
  <ul class="list"> 
    <li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a  href="#dashbord">Dashboard</a></li>
    <br>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
  <script src="admin.js"></script>  
</body>
</html>

Some frameworks like Webpack add the script tag to the head and add defer but I'm not sure if this always works. According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script it should always work.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin</title>
    <link rel="stylesheet" href="style2.css">
    <script src="admin.js" defer></script>  
</head>
<body>
  <ul class="list"> 
    <li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a  href="#dashbord">Dashboard</a></li>
    <br>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
    <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
  
</body>
</html>

I am beginner and facing problem with Javascript and html linkage. Can't see the effect of Javascript in HTML

1 Answers1