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

How can we dynamically render a component in React using an object?

Hey everyone, I'm facing an issue. I would like to render a list that includes a title and an icon, and I want to do it dynamically using the map method. Here is the object from the backend API (there are more than 2 :D) // icons are Material UI Ic ...

javascriptreactjstypescriptreact-hooksnext.js

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...

javascriptphpjqueryhtmlajax

HTML - Using Tables to Add and Edit Rows

Take a look at this demo on JSFiddle for my project: Demo jsfiddle I'm currently in the process of creating a table with various functionalities. The function "sortTable" is responsible for sorting the table and it's functioning as expected. T ...

javascripthtml

Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...

cssselectiongradient

Encountering an issue with react-dom that needs to be resolved

After updating my node and npm installations, I encountered an error when trying to run my project. Specifically, I am using "react": "^0.13.3" and "react-dom": "0.14.0-beta3" npm WARN unmet dependency /Users/hilarl/Desktop/client/node_modules/react-do ...

javascriptnode.jsnpmreactjs

Tips for ensuring the border matches the size of the image

I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side. To achieve this layout, I have implemented a scrollable div for the items. However, I notic ...

javascripthtmlcss

Django works perfectly on local host, but unfortunately, hosting servers are not cooperating

Programming is a new skill for me and I recently created a weather app using Django. The app functions perfectly when I run it locally with the server, but I've encountered difficulties when trying to host it on various platforms. Here is the link to ...

pythonhtmldjangolocalhostweb-hosting

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...

csscss-selectors

Eliminate border around image

I've been trying to get rid of the image border using different methods img { border: 0px; } I even attempted to remove it from the browser console with this code border: none !important This is what my html code looks like <div id="startD ...

htmlcss

I'm curious about the origin of this.on event handler. Is it part of a particular library or framework?

While casually perusing through the application.js file in the express source code, I stumbled upon this interesting piece of code. I'm curious about the origin of this '.on' event. Is it part of vanilla JavaScript or is it a feature provid ...

javascriptexpress

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...

csshtml

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

htmlangularjstwitter-bootstrap

Customize the appearance of the Material UI expansion panel when it is in its expanded

Is there a way to customize the height of an expanded expansion panel summary? Specifically, I am looking to remove the min-height property and set the summary panel's height to 40px instead of the default 64px. I have attempted to make this change in ...

javascriptreactjstypescriptmaterial-uifrontend

What are some strategies for circumventing the need for two switches?

My LayerEditor class consists of two private methods: export class LayerEditor { public layerManager: LayerManager; constructor() { this.layerManager = new LayerManager(this); } private executeCommand() { ...

javascripttypescript

Tips for utilizing PrependTo dynamically on every element

I am facing a requirement that involves prepending an element with a specific class to its sibling with another class. While I have managed to accomplish this for the first occurrence, it seems to fail for all other elements within the same div. Below is t ...

htmljquery

The ExtJS Grid Filter is being triggered excessively

I am working on an ExtJS 6.2 grid that uses the 'classic' API. Although I am not very experienced with Ext, we have a grid component that we reuse with small modifications in different applications. In one of our apps, we have a text field for fi ...

javascriptextjs

empty responseText from GET request using AJAX

I've been working on a chatbox using AJAX and I've encountered an issue where my xhttp.responseText is coming back empty. In firebug, I can see that the GET request is being sent and the correct text is being returned, but for some reason it&apos ...

javascriptphpajaxxmlhttprequest

Enhancing React Performance: Storing Component Identity in Redux State

Can I safely pass this to a Redux action creator from a component defined using React.createClass? In my code, I have created the following reducer: const unsavedChangesProtectionReducer = handleActions({ [ENABLE_UNSAVED_CHANGES_PROTECTION]: (unsaved ...

javascripthtmldesign-patternsreactjsarchitecture

Strange rendering issues when using the react material-ui dialog

Exploring the Project Recently, I developed a front-end project focusing on a delivery service using React and Material UI. One interesting feature I added was a Dialog window that pops up when users click on an item, allowing them to customize it. Here i ...

javascriptreactjsmaterial-uireact-hooksrendering

How can I extract data from a swiffy animation?

Suppose I am tracking the number of mouse clicks in Flash. To do this, I have utilized the following code: import flash.events.MouseEvent; plus.addEventListener(MouseEvent.CLICK,aaa) var i:int=0; function aaa(e:MouseEvent) { i++; var a:Number ...

javascripthtmlactionscript-3google-swiffy