为什么我不能多次使用 ID？答案

【问题标题】：Why can't I use ID multiple times?为什么我不能多次使用 ID？
【发布时间】：2019-01-07 12:19:37
【问题描述】：

这不是完整的代码，但它完全涵盖了错误区域

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

当我将鼠标悬停在子菜单上时，nav li ul a: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();

你能解释一下这里有什么问题吗

【问题讨论】：

ID 是一个唯一标识符。如果您有多个具有相同 ID 的元素，则该 ID 不再是唯一的。这可能会导致许多错误和无法预料的副作用。

标签： javascript html css bootstrap-4

【解决方案1】：

不是很清楚你想要什么，但你最重要的错误是你不能用相同的ID设置3个元素，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/

【讨论】：

你好，伙计。 A 非常感谢您解决了我遇到的确切问题。当我在我的解决方案中实施时，它不起作用；我会弄清楚我的代码有什么问题，谢谢。男人。非常感谢您的帮助。
@JeevaBharathi 很高兴 :)