Хотите заменить атрибут класса в Javascript

Question

Мне нужно заменить цвет фона текстового поля в соответствии с временем суток информацией, поступающей с момента. js. Каждый цвет зависит от того, является ли момент. js время меньшим, равным или большим, чем запись. Это будет использоваться в планировщике / календаре дня. У меня есть два разных кода, которые я пробовал, и ни один из них не работает. Я новичок в программировании, 6 недель в классе.

    var correctTime = moment().hour();
    var time9 = 9;
    var time10 = 10;

    function rightColor() {
    if (correctTime > time9) {
        $("#box9").addClass("past");  
    }
    else if (correctTime >= time9 && correctTime < time10) {
        $("#box9").addClass("present");
        $("#box9").removeClass("past");
    }
    else (correctTime < time9); {
        $("#box9").addClass("future");
        $("#box9").removeClass("present");
        $("#box9").removeClass("past");
    }
}

Второй подход с использованием оператора switch.

var correctTime = moment().hour();
    var time17 = 17;
    var time18 = 18;

    switch(time17) {
    case correctTime > time17:
        switchClass("box5").addClass("past");
        break;
    case correctTime >= time17 && correctTime < time18:
        switchClass("box5").addClass("present");
        break;
    case correctTime < time17:
        switchClass("box5").addClass("future");
        break;  
        default: 
    }

CSS часть.

  .past {
    background-color: #d3d3d3;
    color: white;
    font-size: 30px;
    text-shadow: black 2px 2px;
  }

  .present {
    background-color: #ff6961;
    color: white;
    font-size: 30px;
    text-shadow: black 2px 2px;
  }

  .future {
    background-color: #77dd77;
    color: white;
    font-size: 30px;
    text-shadow: black 2px 2px;
  }



 <tr>
            <div class = "col-md-2">
              <th scope="row" id="9amTime" class="timeOfDay">9:00am</th>
            </div>
            <div class = "col-md-8">
              <td class="event-box"><textarea class="text-box" value="" id="box9"></textarea></td>
            </div>
            <div class = "col-md-2">
              <td class="save-box"><button id="save9am" class="btn btn-outline-secondary saveBtn" type="button"><i
                class="far fa-save"></i></button></td>
            </div>
          </tr>

Answer 1

Кажется, есть проблема с вызовом функции в том смысле, что вы либо вызываете функцию раньше (то есть до загрузки страницы; поскольку вы используете jQuery, используйте прослушиватель document.ready или его сокращение form), или он вообще не вызывается.

Я сделал эту скрипку с кодом, который вы предоставили, и после исправления нескольких мелких проблем код работает:

https://jsfiddle.net/o9rhbn4k/

Обратите внимание, что с вашим кодом есть некоторые проблемы:

   else (correctTime < time9); {

Вам не хватает if, а ; не требуется. Эта строка должна быть:

else if (correctTime < time9) {

В любом случае, посмотрите на скрипт и измените значение переменной correctTime, и фон текстового поля будет обновлен.

Надеюсь это помогает.