javascript - 添加类不是使用 ClassList.add 列出集合

Question

我正在尝试写一个时间戳，打开时显示为绿色，关闭时显示为黑色字体。下面的代码似乎应该可以工作。它正在正确解析时间，但没有选择元素。 请看一下:

<style>
  .closed-sign {
    display: inline;
    display: none;
  }
</style>
<script>
  var myDate = new Date();
  var time = 12;
  alert(time);
  //hour in military

  if ((time < 9) || (time >= 17)) {
    alert("we are closed");
    var openHours = document.getElementById("open");
    openHours.classList.add("closed-sign");
    var closedHours = document.getElementById('closed');
    closedHours.classList.remove("closed-sign");
  }

  if ((time > 9) && (time <= 17)) {
    alert("we are open");
    var openHours = document.getElementById("open");
    openHours.classList.remove("closed-sign";)

    var closedHours = document.getElementById("closed");

    closedHours.classList.add("closed-sign");

  }
</script>

<div style="float: right;" id="open" class="closed-sign">
  <p><span style="color: black">open: </span><span style="color: green;">9:00am - 5pm</span>
</div>
<div style="float: right;" id="closed" class="">
  <p><span style="color: black">closed </span>
</div>

这应该行不通。我已经尝试了几件事，甚至在整个集合中循环，但没有任何效果。我目前放弃尝试按类进行操作，转而尝试按 id 选择元素，但由于某种原因我无法添加或删除类。谁能明白为什么？谢谢。

Answer 1

您的脚本中存在语法错误 -

closedHours.classList.remove("closed-sign";)

改成-

closedHours.classList.remove("closed-sign");

Place your JavaScript code after HTML code Or Place your JavaScript code into window.onload Event like as-

window.onload = function(){
    /*Place your all JavaScript code here*/
}

注意:这里是关于window.onload Event的详细信息