я пытаюсь изменить цвет фона, используя текущее время - PullRequest
Новая
       6

я пытаюсь изменить цвет фона, используя текущее время

2 голосов
/ 12 мая 2019

я пытаюсь запустить свой код, но он не работает

Я уже пытался использовать переменную «color», используя коды rgb (x, x, x), # xxxx, без кавычек ... 

var thehours = new Date().getHours();
if (thehours >= 0 && thehours < 12) {
     document.body.style.backgroundColor = "white";
} else if (thehours >= 12 && thehours < 18) {
    document.body.style.backgroundColor = "grey";
} else if (thehours >= 18 && thehours < 24) {
    document.body.style.backgroundColor = "black";  
}

в консоли я получаю «Uncaught TypeError: Невозможно прочитать свойство 'style' для null в design.js: 3"

Ответы [ 3 ]

0 голосов
/ 12 мая 2019

Вы должны будете убедиться, что элемент document.body определен перед запуском вашего скрипта (например, body не будет определен, если вы запустите скрипт в <head> вашего <html> документа )

Один из способов обеспечить определение document.body - это обернуть ваш скрипт в обработчик событий DOMContentLoaded для объекта document, как показано ниже: 

/* Set up the DOMContentLoaded event handler on the document to ensure
your script is only run once the document.body is defined */
document.addEventListener('DOMContentLoaded', function() {

  /* This script only runs once the whole page's "load" event fires 
  which means that the body element will be defined */
  var thehours = new Date().getHours();
  if (thehours >= 0 && thehours < 12) {
    /* Modified for this demo */
    document.body.style.backgroundColor = "blue"; 
  } else if (thehours >= 12 && thehours < 18) {
    document.body.style.backgroundColor = "grey";
  } else if (thehours >= 18 && thehours < 24) {
    document.body.style.backgroundColor = "black";
  }    

});

См. эту ссылку дополнительную информацию о событии DOMContentLoaded.

0 голосов
/ 12 мая 2019

Это должно работать, но, вероятно, вызывается не в том месте, его следует вызывать после загрузки страницы, я бы порекомендовал поместить его в тег в конце вашего тела, или вы можете использовать кнопку и поместить ее в функции

0 голосов
/ 12 мая 2019

Ваш скрипт в вашем теге <head>?Если это так, попробуйте добавить defer к тегу <script>.

Например: 

<script type="text/javascript" src="design.js" defer></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...