Attempting to retrieve the value of "id" using a "for...of" loop

I am seeking assistance with my auditTime function. In the loop using "for . . of", each element of the div HTML collection with the class name "time-block" should be iterated through, and the number value of that div's id should be assigned to the variable blockHour. Subsequently, I aim to color-code the div based on its relationship to the currentHour variable reading. However, there seems to be an issue that eludes my understanding. Your help is greatly appreciated! 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 class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
  </header>
  <div class="container f-flex flex-column">
    <!-- hour blocks -->
    <div class="d-flex flex-row row">
      <div id="9" class="time-block d-flex w-100">
        <h4 class="hour">9AM</h4>
        <ul id="list-9AM" class="event-list d-flex flex-column"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex fle√x-row row">
      <div id="10" class="time-block d-flex w-100 h-100">
        <h4 class="hour">10AM</h4>
        <ul id="list-10AM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="11" class="time-block d-flex w-100 h-100">
        <h4 class="hour">11AM</h4>
        <ul id="list-11AM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="12" class="time-block d-flex w-100 h-100">
        <h4 class="hour">12PM</h4>
        <ul id="list-12PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="13" class="time-block d-flex w-100 h-100">
        <h4 class="hour">1PM</h4>
        <ul id="list-1PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="14" class="time-block d-flex w-100 h-100">
        <h4 class="hour">2PM</h4>
        <ul id="list-2PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="15" class="time-block d-flex w-100 h-100">
        <h4 class="hour">3PM</h4>
        <ul id="list-3PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="16" class="time-block d-flex w-100 h-100">
        <h4 class="hour">4PM</h4>
        <ul id="list-4PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></i>
          </button>
      </div>
    </div>
    <div class="d-flex flex-row row">
      <div id="17" class="time-block d-flex w-100 h-100">
        <h4 class="hour">5PM</h4>
        <ul id="list-5PM" class="event-list"></ul>
        <input type="text" name="event-input" class="event-form" placeholder="" autocomplete="off" />
        <button class="saveBtn">
            <i class="oi oi-calendar"></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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1dbc0c4d4c3c89cc4d89cc5dec4d2d99cc1c4dfd2d9f1819f839f82">[email protected]</a>/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>

javascripthtmljquerycss

Answer №1

By applying the new class using 

$(this).addClass("present")
and so on... it seems that $(this) is not defined. It would be better to use 
$(block).addClass("present")

Check out this jsfiddle: https://jsfiddle.net/fe56bjks/7/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggle the visibility of the Kendo date calendar container when the input box is clicked

I am currently using a kendo Date picker and it is working perfectly fine. When I click on the icon next to the input box, a date dialog for the calendar opens, which works as expected. However, I would like this dialog to also open when I click directly ...

jqueryangularjskendo-uikendo-datepicker

Storing information in a PHP database

I have created two pop-up divs on my website. Initially, the first div - div1, is displayed and it contains dropdown menus. Inside this div1, there is a button called Next which, when clicked, closes the first div and opens the second div; div2. Div2 consi ...

javascriptphpsqlhtml

Node.js accepts JSON data sent via XMLHttpRequest

I have successfully implemented a post method using xmlhttprequest: var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { console.log('Request finished. Pro ...

javascriptjsonnode.js

Unable to reset the input value to an empty string

I have created a table with a search bar feature that filters the data when the search button is clicked and resets the filter to show unfiltered data when the clear button is clicked. However, the current input value is not clearing from the display even ...

javascriptreactjsmaterial-uijsx

steps to determine if a page is being refreshed

Is there a way to prevent the page from reloading when the user clicks the reload button in the browser? I attempted to use this code, but my break point is not triggering. ngOnInit() { this.router .events .subscribe((e: RouterEvent) = ...

javascriptangulartypescriptangular7

What are effective ways to eliminate cross-origin request restrictions in Chrome?

Just starting out with angular and trying to incorporate a templateUrl in an angular directive. However, when attempting to view the local html file in the browser, I encounter the following errors --> XMLHttpRequest cannot load file:///Users/suparnade ...

javascriptangularjs

Unlinking styles from the template in Vue.js

I have a unique situation where my template contains a <style> block that needs to be positioned near its corresponding div due to CMS restrictions. However, when I try to integrate Vue.js into the mix, it appears to strip out the style block and di ...

javascriptvue.js

Encountering overload error with Vue 3 and Axios integration

Currently utilizing Vue 3, Vite, Axios, and TypeScript. While my function functions properly in development, it throws an error in my IDE and during the build process. get count() { axios({ method: "get", url: "/info/count", h ...

javascripttypescriptvue.jsaxiosvuejs3

Select the small image to reveal the larger overlay image

I have a grid of images and I want each image to expand into fullscreen when clicked. However, the JavaScript I am using is causing only the last image in the grid to overlay. How can I resolve this issue? Here is the code I am currently using: http://js ...

javascriptjqueryhtmlcssimage

Error: Issue with hook function call detected. Struggling to locate exact source in React JS

As I dive into React for the first time, I'm working on creating a sign-up form with multiple steps. Despite reading through the material-ui documentation and learning about ReactJS, I'm struggling to pinpoint where I've gone wrong. Here&ap ...

javascriptreactjsmaterial-ui

Utilize Node.js to proxy Angular requests to a service hosted on Azurewebsites

I am trying to set up a proxy post request in my Node.js server and receive a response from the target of this request. Below is an excerpt from my server.js file code where I have implemented the proxy, but I am facing a issue with not receiving any respo ...

javascriptnode.jsproxyazure-web-app-servicehttp-proxy

Exploring the power of directives in AngularJS for dynamically manipulating the

Using angular directives, I am attempting to dynamically replace a portion of HTML within a portlet on a webpage. The portlet contains two embedded sections. The top section includes a heading obtained from a separate backend service. <div class="head ...

csshtmldomangularjsangularjs-directive

Disabling the default behavior using preventDefault does not have an effect on ajax requests

I'm having an issue with my preventDefault event not working and I can't figure out why. I've searched around but haven't been able to pinpoint the problem. If there's a solution out there, please forgive me! Here's the code I ...

jqueryajax

Using jQuery to Retrieve the HTTP Status Code in the $.ajax.error Function

Currently, I am utilizing jQuery for an AJAX request. Depending on whether the HTTP status code indicates a 400 error or a 500 error, I wish to execute different actions. How can I go about achieving this? $.ajax({ type: 'POST', url: &ap ...

jquery

combine object with an array attribute

If we have the following objects: let firstObject = {items: ["apple"]}; let secondObject = {items: ["orange"]}; and then execute Object.assign(firstObject, secondObject); the new state will be: firstObject.items[0] //"orange" firstObject.items === sec ...

javascriptarraysangularjs

Issue with React Redux: Passing down a component's method to its children results in an undefined error

Currently, I am working on creating a todo list using React and Redux. In my code snippet provided below, there is a component that includes a function called onDeleteItem. The issue I am facing is the inability to pass the onDeleteItem function to the s ...

javascriptreactjsredux

How come the words are clear, but the background remains unseen?

My markup looks like this: <div class="one">Content</div> <div class="two"></div> I have the following CSS styles: .one, .two { height: 20px; } .one { background-color: #f00; } .two { background-color: #0f0; margi ...

css

Is there a way to simulate the parameters injected into an fs callback without actually interacting with the filesystem during testing?

I'm currently utilizing Chai, Mocha, and Sinon for my testing framework. At the moment, I have a functioning test, but I find myself having to set up a directory and populate it with files just to make my tests run successfully. This approach doesn&a ...

javascriptnode.jsasynchronousstubsinon

Presenting JSON information in a concise and visually appealing manner

How can I extract a value from JSON data and display it in an HTML text field? The JSON data looks like this: {"name":"paul"}, but I only want to display "paul" in my text field. Here is my code in CodeIgniter PHP: $data['name'] = $this->name ...

javascriptphpjsoncodeigniter

Tips for altering a key within a tree-view:

I am working with a potentially infinite tree-view array: type Tree = { id: number; name: string; email: string; children: Tree[]; }; const tree: Tree[] = [ { id: 1, name: 'Truck', email: '@mail', children ...

javascripttypescriptrecursiontreetreeview