Cannot figure out to add classes past/present/future based off moment.js current hour

  javascript, momentjs

I’m making an application where I need to have different colors for containers for each hour based off if it is past/present/future. So far here is my code, but I can’t figure out how to fix it. I know there’s an error in the JS by "moment(data.update_script,…"

here is part of the HTML:

<tr class="timeContainer" id="timecontainer">
            <th scope="time" id="hour9" class="time">09:00</th>
            <td><input type="text" class="textbox"></td>
            <td class="btnContainer">
              <button class="saveBtn"><i class="fas fa-save"></i></button>
            </td>
          </tr>

And some of the JS:

// Declare Variables:-----------------------------------------------------------//
var saveBtn = document.getElementsByClassName('saveBtn');
var timeContainer = document.getElementsByClassName('timeContainer');
var btnContainer = document.getElementsByClassName('btnContainer');
var time = document.getElementsByClassName('time');

// Hour Variables: -------------------------------------------------------------//
var hour9 = document.getElementById('hour9');
var hour10 = document.getElementById('hour10');
var hour11 = document.getElementById('hour11');
var hour12 = document.getElementById('hour12');
var hour13 = document.getElementById('hour13');
var hour14 = document.getElementById('hour14');
var hour15 = document.getElementById('hour15');
var hour16 = document.getElementById('hour16');
var hour17 = document.getElementById('hour17');


// Below is moment.js to auto-update time on webpage----------//
var update = function () {
    date = moment(new Date())
    currentDay.html(date.format('dddd, MMMM Do YYYY, HH:mm:ss a'));
};

$(document).ready(function(){
    currentDay = $('#currentDay')
    update();
    setInterval(update, 1000);
});

// Moment.js  to highlight past/present/future timeContainers------------------//

if (moment(data.update_script, 'YYYY-MM-DD h:mm:ss') < moment()) {
    timeContainer.addClass('past');
} else if (moment(data.update_script, 'YYYY-MM-DD h:mm:ss') === moment()) {
    timeContainer.addClass('present');
    timeContainer.removeClass('past');
} else {
    timeContainer.addClass('future');
    timeContainer.removeClass('present');
    timeContainer.removeClass('past');
};

Any help would be appreciated! Thanks!

Source: Ask Javascript Questions

LEAVE A COMMENT