CODEWITHSUNDEEP
javascripthtmlcss
Owen
Owen

Reputation: 198

Difficulty selecting elements on page in JS

I am attempting to build a clock in JavaScript, and currently, I'm stuck on using querySelector to select the appropriate elements I would want.

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59

  var time = h + ":" + m;
  
  console.log(document.querySelector('#time').textContent);
}

showTime();
<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
</body>

The console is telling me: Uncaught TypeError: Cannot read property 'textContent' of null.

Why is that?

Upvotes: 0

Views: 75

Answers (2)

mmaismma
mmaismma

Reputation: 761

We can clearly see that the following snippet is running correctly.

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59

  var time = h + ":" + m;
  
  console.log(document.querySelector('#time').textContent);
}

showTime();
<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
</body>

There must be a different problem with your project. The most probable guess is that your script is executing before the #time has loaded.
You can fix it in a couple of ways.

1. Put the script tag at the end of body.
This way you ensure that the script will only be called when the body has completed loading.

<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
  ...

  <script src="script.js"></script>
</body>

2. Look for window.onload
Only run the code when the window has loaded.

window.onload = () => {
  function showTime() {
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var time = h + ":" + m;

    console.log(document.querySelector('#time').textContent);
  }

  showTime();
}

3. Use the defer attribute
defer attribute ensures that the element to which it is attached loads at the end i.e. after the page has completed loading. This way you can even add the script tag in the head.

<!--This script will load only when the page has completed loading-->
<script src="script.js" defer></script>

Upvotes: 2

Pranav Rustagi
Pranav Rustagi

Reputation: 2721

The reason why it was giving an error in your code was because you might have linked it inside <head>. The contents of body would not have been rendered till then, and it threw an error.

Besides that, you did not changed the time value, you just obtained it, and didn't use it.

I have added the code here working fine...

NOTE : Always link your JS or jQuery code just before the closing body tag.

<body>
  <div class="time">
    <h1 id="time">1:55</h1>
    <h3>PM</h3>
  </div>
  <script>
    function showTime() {
      var date = new Date();
      var h = date.getHours(); // 0 - 23
      var m = date.getMinutes(); // 0 - 59
      var s = date.getSeconds(); // 0 - 59
      var h3Content = "AM";

      var time = h + ":" + m;

      document.querySelector('#time').innerText = time;

      if (h > 12 & h != 24) {
        h3Content = "PM";
      } else if (h == 12) {
        h3Content = "Noon";
      }
      
      document.querySelector('.time h3').innerText = h3Content;

      console.log(document.querySelector('#time').textContent);
    }

    showTime();
  </script>
</body>

Upvotes: 0

Related Questions