Блог

Главная - Вопросы по программированию - Сложность выбора элементов на странице в JS

Сложность выбора элементов на странице в JS

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать часы на JavaScript, и в настоящее время я застрял на использовании querySelector для выбора подходящих элементов, которые я хотел бы.

 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>

Консоль сообщает мне: Uncaught TypeError: Cannot read property 'textContent' of null .

Почему это?

Комментарии:

1. Я поместил ваш код во фрагмент, и, как вы можете видеть, он работает. В вашем проекте должно быть что-то еще, что вызывает проблему.

2. Вы считываете время, которое уже есть, но вы не устанавливаете время, которое вы только что создали в H1.

3. Скорее всего, ваш скрипт не ожидает загрузки страницы и ее готовности перед запуском. Поместите это после тела, а не раньше.

Ответ №1:

Мы можем ясно видеть, что следующий фрагмент выполняется правильно.

 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>

Должно быть, в вашем проекте другая проблема. Наиболее вероятным предположением является то, что ваш скрипт выполняется до #time загрузки.
Вы можете исправить это несколькими способами.

1. Поместите script тег в конце текста.
Таким образом, вы гарантируете, что скрипт будет вызван только после завершения загрузки тела.

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

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

2. Ищите window.onload
Запускайте код только после загрузки окна.

 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. Используйте defer атрибут
defer атрибут гарантирует, что элемент, к которому он прикреплен, загружается в конце, то есть после завершения загрузки страницы. Таким образом, вы даже можете добавить script тег в head .

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

Ответ №2:

Причина, по которой он выдавал ошибку в вашем коде, заключалась в том, что вы могли связать его внутри <head> . Содержимое body не было бы отображено до этого, и это выдало ошибку.

Кроме того, вы не изменили значение времени, вы просто получили его и не использовали.

Я добавил сюда код, который работает нормально…

ПРИМЕЧАНИЕ: Всегда связывайте свой код JS или jQuery непосредственно перед закрывающим body тегом.

 <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 amp; 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>