Changing color in JQuery based on class and the content of HTML elements

Question

Changing color in JQuery based on class and the content of HTML elements

I am attempting to utilize jQuery to extract the inner html of a div with the class name "box_bottom".

These divs are dynamically generated by JavaScript, fetching data from XML. As a result, there could be multiple occurrences based on the XML, and I need to account for that. Since I cannot target them by ID, I want to change the text color to blue if the content is "notifications" and red if the content is "VO".

 $.category = $('.box_bottom').innerHTML;
    if ($.category == 'Notifications') {
     $(".box_bottom").css("color", "blue");
     }
     if ($.category == 'VO')
     {
     $(".box_bottom").css("color", "red");
     }

The Chrome developer console is not indicating any errors, so I am unsure of where the issue lies.

I am fairly new to jQuery, so I have been searching for solutions online. I apologize if this is a basic problem.

javascript jquery html css

Answer 1

Answer №1

If you want to retrieve the content of an element using jQuery, you should use the html() method instead of trying to access the innerHTML property directly.

Replace

$.category = $('.box_bottom').html();

With

$.category = $('.box_bottom').html();

OR

$.category = $('.box_bottom').text();

In addition, consider using $.trim to remove any extra spaces in the text, and it is recommended to name the variable category without using the $ sign to avoid confusion with the jQuery object.

$.category = $.trim($('.box_bottom').text());

Answer 2

If you want to retrieve the content of an element using jQuery, you should use the html() method instead of trying to access the innerHTML property directly.

Replace

$.category = $('.box_bottom').html();

With

$.category = $('.box_bottom').html();

OR

$.category = $('.box_bottom').text();

In addition, consider using $.trim to remove any extra spaces in the text, and it is recommended to name the variable category without using the $ sign to avoid confusion with the jQuery object.

$.category = $.trim($('.box_bottom').text());

Answer 3

Answer №2

 $.category = $('.box_bottom').text().trim();
 if ($.category == 'Notifications') {
   $(".box_bottom").css("color", "blue");
 }
 if ($.category == 'VO')
 {
   $(".box_bottom").css("color", "red");
 }

Answer 4

 $.category = $('.box_bottom').text().trim();
 if ($.category == 'Notifications') {
   $(".box_bottom").css("color", "blue");
 }
 if ($.category == 'VO')
 {
   $(".box_bottom").css("color", "red");
 }

Changing color in JQuery based on class and the content of HTML elements

Answer №1

Answer №2

Similar questions

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

Link scripts can sometimes cause issues with node.js

Using Typescript to add an element to a specific index in an array

I'm having trouble figuring out why this React Router setup is not functioning properly. Can anyone provide any insights

Steer clear of manually inputting URLs in your React components

Working with arrays of objects in D3.js using Javascript

Retrieving the current date in React from a distinct date format

Converting Node.js Date.toString() output into a time format in Go

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

I'm currently working on developing a chat system, but I'm facing an issue where I am unable to send multiple messages consecutively. It seems like there is a problem with the form

What is the optimal approach for managing multiple languages using React Router version 5?

The redirection did not occur as no authorization token was detected

Hiding a Component: Achieving Smooth Behavior with Timer and onPress

Tips for passing the element ID as an argument in the jQuery upvote plugin function

acquiring data via fetch (transferring information from javascript to php file)

Executing sequential jQuery ajax requests with a REST API

How can I implement a jQuery modal dialog that loads a form page with pre-existing jQuery code for Autocomplete functionality?

Retrieve the child DIV element within its sibling without using an identifier

Error: guild is not defined | discord.js

Quickest method for skimming through an extremely lengthy document beginning at any specified line X