Попытка изменить мой цвет навигационной панели в зависимости от времени суток с помощью JavaScript

1

смотрел вокруг, но не мог найти решение. Я не знаю, что делать, и надеялся, что кто-то сможет мне помочь. Я продолжаю получать эту ошибку:

Uncaught TypeError: Невозможно установить свойство "backgroundColor" неопределенного в header.js: 7

это мой js:

   var today = new Date().getHours(); // Creërt een "new data object.
   var color = document.getElementsByClassName('navbar');


   // colors based on time of day 
   if (today >= 18) {
   color.style.backgroundColor = 'pink';
   } else if (today >= 12) {
   color.style.backgroundColor = 'yellow';
   } else if (today >= 0) {
   color.style.backgroundColor = 'blue';
   } else {
   color.style.backgroundColor = 'black';
   }

вот мой html на всякий случай:

   <nav class="navbar">
        <a href="home.html">
        title
        </a>
    </nav>

и мой css:

    .navbar {
    vertical-align: middle;
    padding: 0.5em 4em;
    box-shadow: 0px 0px 15px -2px rgba(31, 31, 31, 0.75);
    background: linear-gradient(to right, rgba(47, 132, 255, 1) 0%, rgba(110,236, 249, 1) 100%);}

Надеюсь, кто-нибудь может помочь.

  • 1
    getVyClassName возвращает массив. Вы должны выбрать один / все элементы этого массива и применить к нему стиль.
Теги:
colors

3 ответа

1
Лучший ответ

Почему бы не использовать .getElementById() поскольку это будет выбирать только один элемент.

Код для этого будет выглядеть следующим образом.

   var today = new Date().getHours(); // Creërt een "new data object.
   var color = document.getElementById('navbar');

   // colors based on time of day 
   if (today >= 18) {
   color.style.backgroundColor = 'pink';
   } else if (today >= 12) {
   color.style.backgroundColor = 'yellow';
   } else if (today >= 0) {
   color.style.backgroundColor = 'blue';
   } else {
   color.style.backgroundColor = 'black';
   }
<nav id="navbar">
  <a href="home.html">title</a>
</nav>
Поделиться
0

document.getElementsByClassName('navbar') возвращает массив. Если у вас есть только одна навигационная панель, вы можете использовать document.getElementsByClassName('navbar')[0]; , который предоставит вам первый экземпляр, но это не лучшая практика.

Или, и лучше, вы можете использовать document.getElementById('navbar') и дать вашему navbar идентификатор navbar вместо класса.

Надеюсь, это поможет! Все, что вы делаете, должно работать.

Поделиться
  • 0
    Это поможет. Но я использую класс, потому что я хочу использовать его на разных страницах.
  • 0
    Если страницы разделены, у вас не должно быть проблем с одинаковым идентификатором на двух страницах. Попробуйте оба способа, но вы обычно не хотите использовать document.getElementsByClassName('navbar')[0] . Так это все, что вам нужно?
Показать ещё 9 комментариев
0 
document.getElementsByClassName('navbar');

Эта строка кода возвращает HTMLCollection (Array). Вы должны перебирать коллекцию для style.backgroundColor

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню