为什么根据时间条件在文本区域中不显示颜色？

Question

我正在尝试使日历块根据当前时间更改颜色。

我在不同时间（军事时间）进行了变量处理，并在条件语句中将其与当前时间进行了比较。例如，在这种情况下，我显示09:00小于当前时间20:00。但是，当此条件为true时，不会在页面上执行颜色。

var dayTime = (moment().format('HH'))
var nine = '09';

console.log(nine);

var ten = '10';
var eleven = '11';
var twelve = '12';
var one = '13';
var two = '14';
var three = '15';
var four = '16';
var five = '17';

if (nine < dayTime) {
  $('#nineText').addclass('past');
}

.past {
  background-color: #ff6961;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <textarea id='nineText' class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
</div>

我觉得我的逻辑正确，但是我知道我错过了一步。

Answer 1

您的CSS类不是present。

Answer 2

该方法不是addClass不是addclass，您的类名与问题中提到的名称不同。

var dayTime = new Date().getHours();
var nine = '09';
console.log(nine);
console.log("Current hours "  + dayTime);
var ten = '10';
var eleven = '11';
var twelve = '12';
var one = '13';
var two = '14';
var three = '15';
var four = '16';
var five = '17';





if (parseInt(nine) <= parseInt(dayTime)){
$('#nineText').addClass('present');
}

.present {
background-color: #ff6961;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "time-block">
  <div class ="row">
      <div class="col-1">
          <p class='hour'>9AM</p>
      </div>
      <div class="col-10">
          <textarea id ='nineText'  class="form-control"  type='text' placeholder= 'placeholder'  rows="2.9"></textarea>
      </div>
      <div class="col-md-1">
          <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
  </div>
</div>