I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have checked my scripting multiple times but can't seem to find the problem.

You can view the code in action here: http://jsfiddle.net/thetuneupguy/r2Bca/17/

var chngClass = '';
var chnginpercentClass = '';
(obj.Change.substr(0,1) == '+') ? chngClass = 'green' : chngClass = 'red';
(obj.Change.substr(0,1) == '+') ? chnginpercentClass = 'green' : chnginpercentClass = 'red';
$lc.append($('<td class="'+chngClass+'">').text(rndchange || "--"));
$lc.append($('<td class="'+chnginpercentClass+'">').text(rndchpercent || "--"));
   });

Answer №1

Your style sheet has a syntax error that needs to be corrected:

// The .red and .green classes are intended to modify font color based on preceding symbol (+ or -)
// Make sure to use /* */ for comments in CSS, not //
.red { color: red; }
.green { color: green; }

Incorrectly written comments in CSS can cause syntax errors like the one affecting the .red rule.

To view an example, visit http://jsfiddle.net/r2Bca/18/

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

Ways to prevent decreasing the value below zero in ReactJS?

I have created two buttons, one for increasing and another for decreasing a counter value. However, when I click on the minus button, it should not display negative values. But in my case, when I click on the minus button (initially at zero), it shows -1, ...

Using JQuery to nest a header tag within a div element

Having trouble adding a header to a div element. The h1 tag just shows 'loading' and I'm not sure why. <div data-role="page" id="addviewtask"> <div id="header" data-role="header" data-theme="a" data-position="fixed"> ...

When you make a POST request to an express API, the properties are not clearly defined

Just getting into Vue.JS and experimenting with creating a basic MEVN to-do list app for practice. I keep encountering an issue when trying to send a POST request to my express server, receiving the error message: TypeError: Cannot read properties of unde ...

Displaying an error message in a spreadsheet cell

Issue The problem arises when viewing the exported excel file where undefined is displayed. However, upon investigation, there are no empty array indexes causing this confusion. Solution Attempt const joinDate = new Date(obj.date); let snap = [ obj. ...

The onClick function for a button is not functioning properly when using the useToggle hook

When the button is clicked, it toggles a value. Depending on this value, the button will display one icon or another. Here is the code snippet: export const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); c ...

The absence of HttpOnly Secure Cookies being transmitted

Here we go again, another inquiry regarding httpOnly Cookies. Seems like many others are facing the same predicament as me. Even though I receive the cookie from the server, it doesn't accompany other requests. I have mysite.example.com in angularj ...

`Misconceptions in understanding AngularJS directives`

I am currently working on a new app that includes both a header and main view, utilizing directives. At first, I had the directive in its own file but decided to relocate it into app.js in order to resolve an issue. Throughout this process, I have experim ...

How to vertically center content within a container-fluid in Bootstrap 4

I'm currently working on vertically aligning the two rows within the container-fluid. They are already aligned horizontally, but I want to center them on the screen. <!DOCTYPE html> <html lang="en"> <head> <! ...

How can I achieve a similar layout in my .cshtml file?

https://i.sstatic.net/f1C0G.png Hey there, I'm looking to achieve a layout similar to the one shown in the image. Specifically, I want the left side panel to remain unchanged when expanding the Accordion control on the right side. Can someone guide ...

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

Error alert: Conversion issue encountered when trying to output a singular variable as a string from

Encountered a peculiar error while attempting to display a single variable retrieved from the database. The process involves querying the top ID from the database and storing it in a variable. The code snippet looks like this: $ID_Query = "SELECT DIS ...

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

On my page, I utilize the getStaticProps function to fetch a list of objects containing book titles, authors, and character lists. Each object is then displayed within a component that formats them into attractive pill-shaped elements. The component rende ...

The AJAX request functions properly when the domain name is configured as 127.0.0.1, but it fails when using an

Trying to solve this issue might be a bit challenging, but I'll do my best to provide all the necessary information. The setup includes: Windows Server 2003 PHP 5.3 Apache 2.2 jQuery A portal exists at , which uses AJAX requests to monitor ...

Can a vertical line be sketched next to a horizontal line?

Let's keep it short and sweet. Here's what I'm attempting to achieve: Currently, this is what I have: Below is the code snippet: #ligne_horizontale_experience { margin-left: 50px; width:170px; height:400px; border ...

"Unlocking the Power of Pandas Dataframes: A Guide to Parsing MongoDB

I have a piece of code that exports JSON data from a MongoDB query like this: querywith open(r'/Month/Applications_test.json', 'w') as f: for x in dic: json.dump(x, f, default=json_util.default) The output JSON looks like this: ...

Utilize Google Sheets to extract information from a web address containing quotation marks

I am currently utilizing a script called "ImportJSON" developed by paulgambill https://gist.github.com/paulgambill/cacd19da95a1421d3164 The URL I am working with contains quotes characters For instance: http://SomeAPIULR?{"Type": "SomeType"}&APIKE ...

What is the best way to fetch data before a component is rendered on the screen?

I am facing an issue with fetching data from a local server in Node. When I try to render the component, the array 'users' from the state appears to be empty, resulting in no users being displayed on the screen as intended. What's strange is ...

What is the best way to achieve a never-ending vertically scrolling image using CSS?

I want to incorporate a vertically scrolling image similar to the one on Adam Whitcroft's amazing landing page. I have tried examining his source code, but I am unable to grasp how he achieved it. The concept is to have the "I'm a scientist" text ...

Connect to a point on the leaflet map using an external <a> tag reference

I have a leaflet map and I am trying to create a link that, when clicked, will activate a specific marker on the map. Essentially, I want the linked marker to simulate being clicked when the link is clicked. Here is an example of the link: <a href="#" ...

Issues encountered when executing unit tests using karma

I encountered these issues in the logs. Seeking advice on how to proceed. Thank you. I've attempted uninstalling and reinstalling phantomjs, clearing out my node modules and bower component directories. Everything was functioning as expected before, a ...