Trying to access "id" value with "for. . . of" loop-CodePudding

I need some help with my auditTime function. The "for . . of" loop should loop through each element of the div HTML collection with the class name "time-block" and assign the number value of that div's id to the variable blockHour. Then, I want to color-code the div based on how it relates to the reading of the currentHour variable. However, something is not working and I cannot figure it out. Thank you! jsFiddle

// jumbotron display 
var currentDay = document.getElementById("currentDay")
currentDay.textContent = moment().format('MMMM Do YYYY, h:mm a')
var checkTime = setInterval(() => {
  currentDay.textContent = moment().format('MMMM Do YYYY, h:mm a')
}, (1000 * 60));


// setting and getting calendar events 
$(".saveBtn").click(function(event) {
  var eventHour = $(this).siblings(".hour").html()
  var eventText = $(this).siblings("input[name=event-input]").val().trim()
  $("input[name=event-input]").val("");
  var calEventObj = {
    text: eventText,
    hour: eventHour
  }
  saveCalEvent(calEventObj);
  var calEventLi = document.createElement("li")
  calEventLi.textContent = calEventObj.text
  $("#list-"   calEventObj.hour).append(calEventLi);
});

function saveCalEvent(calEventObj) {
  var currentEvents = loadCalEvents();
  currentEvents.push(calEventObj);
  localStorage.setItem("calEventObjects", JSON.stringify(currentEvents))
}

function loadCalEvents() {
  var calEventsArr = JSON.parse(localStorage.getItem("calEventObjects"));
  if (!calEventsArr || !Array.isArray(calEventsArr)) return []
  else return calEventsArr;
}
var showCalendar = function() {
  var currentEvents = loadCalEvents();
  for (var item of currentEvents) {
    var calEventLi = document.createElement("li")
    calEventLi.textContent = item.text
    $("#list-"   item.hour).append(calEventLi);
  }
}
showCalendar();

// time block color-coded to indicate past, present, or future
var currentTime = new Date();
var currentHour = currentTime.getHours();

var auditTime = function() {
  for (var block of $(".time-block")) {
    blockHour = parseInt(block.getAttribute("id"))
    if (blockHour === currentHour) {
      $(this).addClass("present")
    } else if (blockHour < currentHour) {
      $(this).addClass("past")
    } else {
      $(this).addClass("future")
    }
  }
}
auditTime()

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea {
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description {
  white-space: pre-wrap;
}

.time-block {
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
  ;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

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

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

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06AED5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all .3s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />
  <link rel="stylesheet" href="assets/css/style.css" />
  <title>Work Day Scheduler</title>
</head>

<body>
  <header >
    <h1 >Work Day Scheduler</h1>
    <p >A simple calendar app for scheduling your work day</p>
    <p id="currentDay" ></p>
  </header>
  <div >
    <!-- hour blocks -->
    <div >
      <div id="9" >
        <h4 >9AM</h4>
        <ul id="list-9AM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="10" >
        <h4 >10AM</h4>
        <ul id="list-10AM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="11" >
        <h4 >11AM</h4>
        <ul id="list-11AM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="12" >
        <h4 >12PM</h4>
        <ul id="list-12PM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="13" >
        <h4 >1PM</h4>
        <ul id="list-1PM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="14" >
        <h4 >2PM</h4>
        <ul id="list-2PM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="15" >
        <h4 >3PM</h4>
        <ul id="list-3PM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="16" >
        <h4 >4PM</h4>
        <ul id="list-4PM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
    <div >
      <div id="17" >
        <h4 >5PM</h4>
        <ul id="list-5PM" ></ul>
        <input type="text" name="event-input"  placeholder="" autocomplete="off" />
        <button >
            <i ></i>
          </button>
      </div>
    </div>
  </div>

  <!-- jQuery methods -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- jQuery UI -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <!-- jQuery UI for mobile -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.ui.touch-punch.min.js"></script>
  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
  <!-- Bootstrap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- MomentJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <!-- js script -->
  <script src="./assets/js/script.js"></script>
</body>

</html>

CodePudding user response：

You are assigning the new class with $(this).addClass("present") and so on... $(this) is not defined. Instead, use $(block).addClass("present")

jsfiddle here: https://jsfiddle.net/fe56bjks/7/