Modify the CSS by adding a class to the div

  var totalForDay = parseFloat(twodecimalDomforDay) + parseFloat(twodecimalImportforDay);
             totalForDay = totalForDay.toFixed(2);
             var totalyearly = parseFloat(twodecimalDomforYearly) + parseFloat(twodecimalImportyearly);
             totalyearly = totalyearly.toFixed(2);
             badgesData += '<div class="row For-Avg"><div class="col-xs-6 sm-6 md-6 lg-6 left-align"><label class="for-lab">For The Day</label></div><div class="col-xs-6 sm-6 md-6 lg-6 right-align"><label class="year-lab">Yearly Avg</label></div></div><div class="row For-Avg"><div class="col-xs-6 sm-6 md-6 lg-6 left-align"><label class="for-lab-Two">' + totalForDay + '</label></br><div class="border-cls"></div></div><div class="col-xs-6 sm-6 md-6 lg-6 right-align"><label class="year-lab-Two">' + totalyearly + '</label></br><div class="border-cls-Two"></div></div></div></div>';
             gasTitle += '<label class="lab-class">' + objKeys[i] + '\n(IN &nbsp' + objkeysData[0].UNIT + ')' + '</label>';
             if (parseFloat(totalForDay) < parseFloat(totalyearly)) {
                 console.info("less yes");
                 $("div.border-cls").css("border-bottom", "7px solid red");
                 $("div.border-cls-Two").css("border-bottom", "7px solid green");
                 //-----border-red for day border-green for yealy
             } else {
                 //-----border-green for day border-red for yealy
                 console.info("greatre yes");
                 $("div.border-cls").css("border-bottom", "7px solid green");
                 $("div.border-cls-Two").css("border-bottom", "7px solid red");
             }

Hello Team,

Within the given HTML code stored in badgesData, there is a div element with the CSS class named border-cls. I am seeking assistance on how to update this element based on the condition mentioned in the provided JavaScript code.

Your suggestions and guidance are highly appreciated!

Answer №1

It appears that you are overlooking {} within the css() method. Please consider implementing the following code snippet

 if (parseFloat(totalForDay) < parseFloat(totalyearly)) {
             console.info("less yes");
             $("div.border-cls").css({"border-bottom": "7px solid red"});
             $("div.border-cls-Two").css({"border-bottom" :"7px solid green"});
             //-----border-red for day border-green for yealy
         } else {
             //-----border-green for day border-red for yealy
             console.info("greater yes");
             $("div.border-cls").css({"border-bottom": "7px solid green"});
             $("div.border-cls-Two").css({"border-bottom": "7px solid red"});
         }

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

What is the best way to highlight the active link in my sidebar navigation bar when using material design in an Angular application?

<div class="mt-3"> <mat-nav-list> <a mat-list-item class="ml-2" style="font-size:15px;" (click)='paycard.html'> SERVICES </a> <a mat-list-item class="ml-2" style="font-size:15px;" (click ...

Using JavaScript to dynamically retrieve element IDs

Within the content on my page, there are multiple tables displaying product information along with their respective authors. Additionally, there is a div that contains hyperlinks for each author. Currently, I am linking the authors' names to hyperlink ...

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...

Spring Controller not able to resolve JSON response

I am facing a similar issue as described here but I have not been able to resolve it using the solutions provided. In my Spring application XML, I have only included the mvc annotation driven element: <mvc:annotation-driven /> Here is the code sni ...

Having trouble with the Mysqli query not functioning properly in PHP code after being dispatched via Ajax

I am encountering a problem with a specific Myqsli query. $sqlselect = "SELECT visitatori_id FROM visitatori WHERE visitatori_nome='".$nome."' AND visitatori_cognome='".$cognome."' AND visitatori_orastart='".$time."' AND v ...

The mobile menu in bootstrap is stationary while the background scrolls instead of the menu

I recently completed a website using Bootstrap, and everything seems to be working well on desktop. However, I am facing an issue when loading the site on mobile devices. The menu is not scrolling properly when opened, making it difficult to view all the o ...

Unveiling a hidden div when a JSP expression language is not empty

Is there a proper way to display a hidden div only when certain conditions are met? For example, I want to show a login error message within a div only if there is an error. <div id= "error" class="alert alert-danger" hidden="hidden" role="alert"> ...

Tips for Resizing google reCAPTCHA

The problem's image is shown below: https://i.sstatic.net/ph2EX.jpg Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> ...

Having trouble getting the height to work properly on your Blogger Blogspot template?

Issue with embed height=100% not working <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> & ...

How to Use CSS to Crop a String from the Middle

My file has a long name and I am using CSS text-overflow: ellipsis to crop it. <style> #fileName { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> <div id="fileName"> ...

The jQuery function for navigating back does not immediately trigger

I currently have a jQuery function that should make the assigned link act as a "Go back to previous page" link: function goback() { $('a').click(function(){ parent.history.back(); return false; }); } However, it only works w ...

Using Jquery to set a delay for a specified variable

I have coded a jQuery timer that updates every second by increasing the inner text of a div by +1. The goal is to create a clock-like effect. However, I want this timer to stop updating after 15 seconds. var count = 0; var updateDiv = setInterval(function ...

Removing the white background in a modal form with rounded corners in Angular

Is there a way to remove the white background when opening a modal form with round corners? https://i.sstatic.net/cpr2h.png This is the CSS code for the modal form: .modal-msg { .modal-dialog { width: 25vw !important; max-width: 35vw !important ...

What is causing this if statement to be consistently overlooked?

I am trying to change the class of an element when the document scroll position is greater than 300px. However, my code seems to be ignored every time. Can anyone help me figure out why? if ( $(document).scrollTop() > 300) { ...

Tips on preventing redundancy in jQuery

I've been creating customized jQuery validation for a form and I keep repeating the same elements multiple times. Any advice on how to be more efficient and 'DRY' would be greatly appreciated. Here's an example below for reference. < ...

Developing a webView for the C# / Mono Launcher application

Currently, I am working on developing a C# mono launcher using Xamarin Studio. My goal is to create the interface with HTML and CSS in a webView. Is it possible to achieve this in C#? If so, could you please provide some guidance on how to accomplish this ...

Is there a way to position this Flex-Box Item beside the image?

Please refer to the image How do I rearrange this Flex-Box Item to be positioned next to the image? https://i.sstatic.net/eSy3w.png <div class="brif fb"> <div class="sml-con"><img class="sml-thumb" src="images/chosen/edwa ...

Exploring the Functionality of Drag and Drop with JPG and GIF in Internet Explorer 9/10/11

When trying to drag, drop, or select a file using a form in Internet Explorer 9/10/11, only JPEG and PNG files are accepted, while JPG and GIF extensions are rejected. This issue is present in both the code I am using below and in the demo found at https:/ ...

hierarchical browsing system

Take a look at the image provided below. Currently, I am using multiple unordered lists - specifically 5. However, I would prefer to consolidate them all into a single nested ul. I am encountering two issues: How can I add a border-bottom to the hori ...

Tips for accessing elements inside #shadow-root (open) when clearing browsing data in Chrome Browser with the help of a cssSelector

Recently, I came across a discussion on how to automate shadow DOM elements using Selenium, specifically dealing with #shadow-root (open) elements. During my attempts to locate the Clear data button within the popup for Clear browsing data, which appears ...