-1

This seems like a really simple problem but I just can't figure it out. In Chrome's Console log, I keep getting:

Uncaught TypeError: Cannot read property 'clientHeight' of null

This is my HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js"></script>
</head>
<body>
    <div id="deets">
        <h1>Document</h1>
        <p>Lorem ipsum...</p>
    </div>
    <canvas id="anim"></canvas>
</body>
</html>

And this is my JS code:

// 1. test main.js is linked to index.html
console.log('it works!!');

// 2. test #document code is available
console.log(document);

// 3. test .getElementById("deets") and get .clientHeight
console.log(document.getElementById("deets").clientHeight);

The First and Second tests work, but I can't figure out what's wrong with the Third. Element id="deets" keeps returning as a null.

Would appreciate any help so much. Thanks!

Cleptus
  • 2,738
  • 4
  • 26
  • 28
Johhhn
  • 15
  • 3
  • Damn, I think I figured it out. Just had to move the – Johhhn Jul 26 '20 at 06:19
  • put your console calls in a window loaded event listener – Towkir Jul 26 '20 at 06:19
  • even if you move the script at the bottom of the body, always access DOM elements after document loaded / window loaded. bcoz scripts loads faster than the DOM tree. – Towkir Jul 26 '20 at 06:23
  • alos, accept @hrgui 's answer. its a SO standard to accept answers which are correct :) – Towkir Jul 26 '20 at 06:24
  • 1
    Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Sebastian Simon Jul 26 '20 at 06:28
  • @user4642212 Very helpful, still getting used to search terminology so apologies if my question was similar to previous ones, I did try my best to look through previous threads! :) – Johhhn Jul 26 '20 at 07:13

3 Answers3

1

Something to try:

  1. Consider moving <script src="js/main.js"></script> before the </body>?

This is because we're calling document.getElementById("deets") before the DOM elements are rendered.

  1. If we need to call <script src="js/main.js"></script> in the head, consider using the onload event.
hrgui
  • 560
  • 2
  • 5
0

Put your js/main.js file in script tags at the end of your body section and it should work.

0

This may help you. You should move the script tag to bottom of body tag.

  <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
     <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div id="deets">
        <h1>Document</h1>
        <p>Lorem ipsum...</p>
        </div>
        <canvas id="anim"></canvas>
        <script src="js/main.js"></script>
    </body>
   </html>
ZBorkala
  • 266
  • 2
  • 12