добавление класса не перечисляет коллекцию с 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>

Разве это не должно работать.Я пробовал несколько вещей, даже просматривая коллекцию, но ничего не работает.В настоящее время я отказался от попыток сделать это по классу и попытался выбрать элемент по идентификатору, но по какой-то причине я не могу добавить или удалить класс.Кто-нибудь мог понять почему?спасибо.

Answer 1

Привет, в коде была синтаксическая ошибка

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

код должен быть

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

и загрузить скрипты в HTML, я изменил код, поместив скрипты ниже.это 100% работает, проверьте это.

<style>
    .closed-sign {
        display: inline;
        display: none;
    }
</style>

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

Answer 2

В вашем скрипте есть синтаксическая ошибка -

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

Измените ее на -

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

Поставьте код JavaScript после HTML кода или поместитеВаш JavaScript код в window.onload Событие подобно as-

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

Примечание: Вот подробности о window.onloadСобытие