Modify background color of a div depending on the text within the div

Question

Modify background color of a div depending on the text within the div

At this website, I have a unique "status tag" (such as Diesel, Auto, Manual, etc) displayed on each inventory picture. I am looking to dynamically change the background color of the tag based on the text within the DIV element.

Below is the code snippet that I currently have:

<script>
$(function() {
    var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    switch (text) {
     case 'Diesel':
        color = '#ff0000';
        break;
     case 'AUTO':
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $('.image-container>.status-tag').css('background', color);
});
</script>

Despite setting the colors, only the default color is appearing on the site. I have tried implementing the code but haven't been successful in achieving the desired result based on the text content.

This code was sourced from a different post (original code here) and adapted for my website, but I seem to be experiencing some issues in making it work correctly. Any assistance in resolving this matter would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

$(function() {
    //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    $('.image-container>.status-tag').each(function(){
    console.log($(this).text());
      var text = $(this).text().toLowerCase();
    switch (text) {
     case 'diesel':
        color = '#ff0000';
        break;
     case 'auto':
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $(this).css('background', color);
    });
});

<!DOCTYPE html>
<body>
 <div class="image-container">
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

A solution has been provided above, in a runnable format. It addresses the issue of comparing text strings with different cases and handling multiple image containers with individual switch cases. Additionally, an example of applying styles after an ajax call is demonstrated using jQuery.ajax().

By iterating through each .image-container>.status-tag element, the switch cases can be correctly applied to change the background color. The .done() function is recommended for handling tasks after an ajax call to ensure proper execution.

Answer 2

$(function() {
    //var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    $('.image-container>.status-tag').each(function(){
    console.log($(this).text());
      var text = $(this).text().toLowerCase();
    switch (text) {
     case 'diesel':
        color = '#ff0000';
        break;
     case 'auto':
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $(this).css('background', color);
    });
});

<!DOCTYPE html>
<body>
 <div class="image-container">
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Diesel</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">AUTO</div>
   <div class="status-tag" style="height:50px;width:50px;margin-top: 10px; margin-bottom: 10px;">Bleh</div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

A solution has been provided above, in a runnable format. It addresses the issue of comparing text strings with different cases and handling multiple image containers with individual switch cases. Additionally, an example of applying styles after an ajax call is demonstrated using jQuery.ajax().

By iterating through each .image-container>.status-tag element, the switch cases can be correctly applied to change the background color. The .done() function is recommended for handling tasks after an ajax call to ensure proper execution.

Answer 3

Answer №2

In response to the comment, I am providing an answer for better clarity. When defining the variable text, you are converting all text to lowercase, which is a good practice in most cases. This allows for flexibility in using a mix of upper and lowercase letters in your markup while still functioning correctly. However, it is essential to ensure that the case matches exactly in the switch statement for it to work accurately.

$(function() {
    var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    switch (text) {
     case 'diesel': // modified here
        color = '#ff0000';
        break;
     case 'auto': // also modified here
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $('.image-container>.status-tag').css('background', color);
});

Answer 4

In response to the comment, I am providing an answer for better clarity. When defining the variable text, you are converting all text to lowercase, which is a good practice in most cases. This allows for flexibility in using a mix of upper and lowercase letters in your markup while still functioning correctly. However, it is essential to ensure that the case matches exactly in the switch statement for it to work accurately.

$(function() {
    var text = $('.image-container>.status-tag').text().toLowerCase(), color;
    switch (text) {
     case 'diesel': // modified here
        color = '#ff0000';
        break;
     case 'auto': // also modified here
        color = '#6dc8bf';
        break;
     default:
        color = '#39d52d';
    }
    $('.image-container>.status-tag').css('background', color);
});

Answer 5

Answer №3

Summary:

Shift your script to the bottom of the body tag
Utilize each method for status flags
Convert your switch statements to lowercase as well

Since your script is currently located in the head section, it may run before the body is fully rendered, resulting in an inability to locate your elements. Therefore, relocate it to the end of the body section.

Additionally, as you are using the jQuery element selector, you are receiving an array of elements, not just one. Ensure to iterate over all of them using an each method. Something similar to this (remember to switch to lower case for your switch cases to find a match):

$(function() {
    var textElements = $('.image-container>.status-tag'), color;
    
    textElements.each(function(index, element){
      var text = $(element).text().toLowerCase();

    switch (text) {
         case 'diesel':
            color = '#ff0000';
            break;
         case 'auto':
            color = '#6dc8bf';
            break;
         default:
            color = '#39d52d';
        }
      $(element).css('background', color);
    })
    
    
});

Answer 6

Summary:

Shift your script to the bottom of the body tag
Utilize each method for status flags
Convert your switch statements to lowercase as well

Since your script is currently located in the head section, it may run before the body is fully rendered, resulting in an inability to locate your elements. Therefore, relocate it to the end of the body section.

Additionally, as you are using the jQuery element selector, you are receiving an array of elements, not just one. Ensure to iterate over all of them using an each method. Something similar to this (remember to switch to lower case for your switch cases to find a match):

$(function() {
    var textElements = $('.image-container>.status-tag'), color;
    
    textElements.each(function(index, element){
      var text = $(element).text().toLowerCase();

    switch (text) {
         case 'diesel':
            color = '#ff0000';
            break;
         case 'auto':
            color = '#6dc8bf';
            break;
         default:
            color = '#39d52d';
        }
      $(element).css('background', color);
    })
    
    
});

Modify background color of a div depending on the text within the div

Answer №1

Answer №2

Answer №3

Similar questions

Embracing this web design framework with Rails

Issue with bidirectional binding on angular material slide toggle not functioning as anticipated (Angular 4)

How can I troubleshoot a C# web method called from an AJAX request in

What is the method for determining the size of a WeakMap?

I'm struggling to grasp how to effectively utilize a JSON Object in this situation

What is the best method for embedding JSON data into a script tag within a Zope Chameleon template?

Utilizing AngularJS to create a dynamic autocomplete feature with data sourced

Top method for integrating configuration into a module

In JavaScript, JSON data is parsed using a comma separator

Issue encountered: Next.js has failed to hydrate properly due to a discrepancy between the initial UI and server-rendered content

Unable to properly delete data in Express/Postgres

Exception encountered with HTML5 cache manifest

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

Employing selenium.isElementPresent in Selenium 1 does not have the capability to identify an element that is dynamically added to the Document Object Model (

Adding a Close Button to a MaterializeCSS Card or Card-Panel

Dealing with null route parameters for Express applications

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

What is the process of displaying JSON headers using JavaScript?

Using JavaScript, swap out the default "item added to cart" message with a custom Sweet Alert notification in WooCommerce

auto-scrolling webpage as elements come into view