The console log is displaying NaN for any variable I input. Additionally, the color function is not correctly changing classes, likely due to the number issue. I still need to address local storage, but my main focus is on getting the variable to display a number as intended and ensuring that the class changes according to the time of day.
To improve functionality, switch from using
.children('div').attr('data-value').data('value')
var time9 = (parseInt($('#9').data('value')));
var time10 = (parseInt($('#10').data('value')));
var time11 = (parseInt($('#11').data('value')));
var time12 = (parseInt($('#12').data('value')));
var time13 = (parseInt($('#13').data('value')));
var time14 = (parseInt($('#14').data('value')));
var time15 = (parseInt($('#15').data('value')));
var time16 = (parseInt($('#16').data('value')));
var time17 = (parseInt($('#17').data('value')));
The desired data attribute is located directly on the selected element, without any nested div elements.
Avoid using $('#10').children('div') as #10 does not have any children:
<div class="col-2 timeslots hour" id="10" data-value="10">10:00am</div>
Instead, retrieve #10's data-value by calling $('#10').attr('data-value'), for example:
var time10 = parseInt($('#10').children('div').attr('data-value'));
This logic can also be applied to time9 through time17.
In relation to local storage, code has been included to save and fetch values from <textarea>.
I need some help creating a feature similar to this: View Image Unfortunately, I haven't been able to locate any tutorials or code samples on how to implement multi-selectable language code blocks using HTML/CSS. My CSS knowledge is limited, and I r ...
I've been struggling to split text inside an :after pseudo-element of a label that receives its content from a data- attribute. I've attempted using word-break, as well as playing around with width, max-width, and position:relative, but nothing s ...
My current task involves adjusting the width of containers while also monitoring changes in my @Input since the DOM structure is dependent on it. @Input('connections') public connections = []; @ViewChildren('containers', { read: Elemen ...
Currently, I am working on a detailed view page that looks like the following: https://i.sstatic.net/Kw9aE.jpg My objective is to display relevant fields with HTML effects, if applicable. Below is a snippet of the CSHTML code for the aforementioned view ...
Currently, I'm utilizing TypeScript in a Vue.js application and aiming to implement the drop event to initiate image uploading as shown below: handleDOMEvents: { drop(view, event) { const hasFiles = event.dataTransfer && ...
I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the l ...
Can someone assist me with pushing even numbers into an array using an arrow function? I'm unsure of how to do this. Here's my code: var arrayEvenNumbers = []; var evenNumbers = (arrayEvenNumbers) => { for (i = 2; i <= 20; i++) { i ...
Currently, I am working on testing some data using a REST API. The data is stored as an array within the project. My goal is to have the data "reset" every time a test suite runs, so that I can accurately determine the amount of data in the array. Howeve ...
I am trying to open multiple images simultaneously in the default Windows Photo Viewer that I have stored in my folder using the npm open library: let files = ['Dog.gif', 'Cat.jpeg']; for(let i=0; i<files.length; i++){ open(`${file ...
I am currently working with an angular code that utilizes jsonp. One issue I am encountering is related to the object variable 'o_params' in my params. Here is the javascript code snippet: $http({ method: 'JSONP', ...
In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...
Hey there, I'm pretty new to this whole HTML/CSS thing and need some help. I have a website called cme.horse and everything seems to be running smoothly except for the Home page (main/index page). The issue is that it scrolls past the footer, while al ...
I am currently working on a website where the URL parameter is updated based on user actions. This update triggers changes in the webpage without the need for refreshing. An example scenario would be in an E-commerce site where the URL changes when the use ...
When using @HostBinding in conjunction with Chrome's Drag and Drop API, the code looks like this: @Directive({ selector: '[sortable-article]' }) export class SortableArticleComponent { @HostBinding('class.dragged-element') ...
In my current component setup, I am receiving props from a parent. However, I am facing an issue where I only want to clone these props without any changes affecting the parent component. <template> <input-text v-model="form.name" /&g ...
The following code snippet represents the main entry point of a React app, app.js, which includes the router endpoints. Below the app.js code, you will find the code for a Nav component, which serves as the navigation menu. I am looking to structure this ...
Issue Resolved - See Update Below While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occu ...
I'm currently working on setting up a slot machine-style animation using Vue 3, TailwindCSS, and HeadlessUI. At the moment, I have a simple green square that slides in from the top and out from the bottom based on cycles within a for-loop triggered by ...
Currently, I am troubleshooting a website that was created by another developer. There is a form with JavaScript validation to ensure data is accurately entered into the database. However, I am puzzled as to why I keep receiving these alert messages. Pleas ...
I have an image of an arrow inside a div. The div is positioned fixed in the bottom right corner of an extremely wide page. Is there a way to utilize jQuery to scroll the window 600px to the right each time the arrow is clicked? Also, can I detect when th ...