Почему я не могу использовать ID несколько раз? - PullRequest
Новая
       0

Почему я не могу использовать ID несколько раз?

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

Это не полный код, но он полностью покрывает область ошибки 

<body onload="init()">
    <nav>
      <h1 style="font-family:Helvetica;">
        <ul class="nav">
          <li ><a href="#">Menu 1</a>
            <ul>
              <li id="navbar-menu"><a href="#">Sub-menu Item 1</a></li>
              <li id="navbar-menu"><a href="#">Sub-menu Item 2</a></li>
              <li id="navbar-menu"><a href="#">Sub-menu Item 3</a></li>
            </ul>
          </li>
        </ul>
      </h1>
    </nav>
<body>

Всего имеется 4 меню. 

.nav li ul a:hover {
   background: rgb(96, 235, 245);
    color:white;
  }

body {

    color:white;
  }

Цвет фона в навигационной системе: hober появляется при наведении курсора на подменю.То, что я намеревался сделать, это изменить этот цвет в зависимости от времени пользователя.Поэтому в моем коде я удалил свой цвет bg, чтобы он не конфликтовал с java-скриптом, как я сделал то же самое с body.Но это не работает.Вот полный Java-скрипт для моего кода: 

function init() {
  function setBackgroundForTimeOfDay() {
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (hours < 6 || hours >= 18)
      body.style.background = 'linear-gradient(to right, rgb(39, 38, 38), rgb(245, 96, 96),rgb(39, 38, 38))';

    else
      body.style.background = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 235, 245),rgb(39, 38, 38))';
  }
  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

function init1() {
  function setBackgroundForTimeOfDay() {
    const li = document.getElementById('navbar-menu');
    const hours = new Date().getHours();

    if (hours < 6 || hours >= 18)
      li.style.background = 'rgb(245, 96, 96)';

    else
      li.style.background = 'rgb(96, 235, 245)';
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}
init1();

Не могли бы вы объяснить, в чем проблема здесь

1 Ответ

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

Не совсем понятно, что вы хотите, но ваша самая главная ошибка в том, что вы не можете установить 3 элемента с одинаковым ID, ID должен быть уникальным!Измените его с помощью class и измените логику следующим образом: 

function init1() {
  function setBackgroundForTimeOfDay() {

    //_______________ getElementById ______________________
    var li = document.getElementsByClassName('navbar-menu'); 

    const hours = new Date().getHours();


    //_______________ and loop through li ___________
    if (hours < 6 || hours >= 18)
        for (var i=0; i < li.length; i++) {
          li[i].style.background = 'rgb(245, 96, 96)';
        }

    else
        for (var i=0; i < li.length; i++) {
          li[i].style.background = 'rgb(96, 235, 245)';
        }
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

Вот ваш отредактированный пример: http://jsfiddle.net/gah909cd/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...