Change background of div based on value of div

javascript change background color based on value
change background color using javascript function
javascript onclick change background color of div
change background color on button click in javascript
javascript program to change background color using array
javascript get background color
javascript change font color based on value
toggle background color javascript

Trying to get this javascript to read the value of the div "flow-hold" and change the background color based on the value.

I have a div named flow hold with a value of 132 for example, that I would like to see green because it is less than the 200 threshold. If the value exceeds the threshold, I would like it to be red.

<div class="flow-hold">132</div>
<script type="text/javascript">
 $('.flow-hold'), function(){
   if($(this).val()>=200){

       $('.flow-hold').css({"background-color":"red"});
   } else {
       $('.flow-hold').css({"background-color":"green"});

   }
});
</script>

try this simple and easy:

$('.flow-hold').each(function() {
   if (parseInt($(this).text()) >= 200) {
      $(this).css("background-color","red");
    } else {
         $(this).css("background-color","green");
    }
});

HTML DOM Style backgroundColor Property, the background color. Look at CSS Color Values for a complete list of possible color values Set a background color of a specific <div> element: document. JavaScript - Change Div Background Using Javascript - Free JavaScript Tutorials, Help, Tips, Tricks, and More. JavaScript - Change Div Background Using Javascript - AllWebDevHelp.com Close Window

If you want to do it on page load you could use your Back-End technology to assign a CSS class with demanded color according to the threshold.

For example, in PHP it would be:

<div class="flow-hold <?=($threshold>=200)?'bg-red':'bg-green'?>">132</div>

In your CSS file:

bg-red{
background-color: red;
}
bg-green:{
background-color: green;
}

However, if you want to do it on client-side, you have to allocate an exact action to it, for instance:

<div class="flow-hold">132</div>
<script type="text/javascript">
 $('.flow-hold').on('hover', function(){
   if($(this).val()>=200){

       $('.flow-hold').css({"background-color":"red"});
   } else {
       $('.flow-hold').css({"background-color":"green"});

   }
});
</script>

CSS Backgrounds, The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent: opacity 1. I want to change the background of my main div depending on the time of day. Right now this code works for two time of day, day and night but it only works on the "body" tag not on a div.

actually your problem are the accessors that you are using. check that if you use JQuery and get the items by class you will get an array with all the divs containing that class.

so here you have a working example of what you wanted to achieve taking into account what I told before.

NOTE: your code doesn't run by itself, next time please fix it. NOTE2: note that I didn't do a lot of changes and it started to work.

function changeBackground() {
  let div = $('.flow-hold')[0];
  if (div.innerText >= 200) {
    $('.flow-hold').css({
      "background-color": "red"
    });
  } else {
    $('.flow-hold').css({
      "background-color": "green"
    });
  }

}

changeBackground();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flow-hold">132</div>

Show Hide DIV Based on Dropdown Selection in jQuery, How to show and hide div elements based on dropdown selection in jQuery a select box using the jQuery change() method in combination with the show() and hide() methods. The div boxes in this example are hidden by default using the CSS display property which value is set to none . .green{ background: #​228B22; } I am trying to make my basket button have a circular div background turn blue after an item is added to the basket, so far the add to basket function is working perfectly with ajax I just can't somehow toggle background from none to display based on for example if the basket has 1 or more items the background needs to be blue and if the basket

You can use the script below:

$(document).ready(function(){
  var value = parseInt($('.flow-hold').html());

  if(value >= 200){
     $('.flow-hold').css("background-color","red");
  }
  else {
     $('.flow-hold').css("background-color","green");
  }
});

How to Change the Background Color of a Web Page Using , You can easily change the background color of a webpage i.e. the <body> element or any other element dynamically by using its style property in JavaScript​. Making sure that those values from the formula are recognised (late, upcoming) and certain color + text being displayed based on what is the value in the cell. This should give you an idea how to have a simple start with this goal, and if you want more advanced and more statuses for instance, you could use more IF formulas inside of another IF

I believe you intended to use the .each( function ) jQuery method, where the function should only handle one element at a time, so it shouldn't lookup $('.flow-hold') again, since there can be more than one element with that class.

You should also use the .text() method, not the .val() method.

$('.flow-hold').each(function() {
    if ($(this).text() >= 200) {
        $(this).css({"background-color":"red"});
    } else {
        $(this).css({"background-color":"green"});
    }
});

Since you are setting the same property in both cases, you can also use the implicit looping of the .css( propertyName, function ) method:

$('.flow-hold').css("background-color", function() {
    return ($(this).text() >= 200 ? "red" : "green");
});

How to change an element color based on value of the color picker , How to convert an Object {} to an Array [] of key-value pairs in JavaScript? To change the color of our element based on the value of color picker we have to use onclick() event of the element and change its CSS background-color: black​;. have a table displayed by a web Part with a td section having a class ms-vb2 and inside that td there is a div. Now i want to make the background color changing the color of the td based on the value of containing div - jQuery Forum

jQuery Change CSS Dynamically, Change Specific CSS Element You may wish to just extend a style based upon it's current value. Common Background CSS Changes. Re: dynamically setting the css value Jul 18, 2009 01:58 AM | nb123 | LINK anzer,i wud not know the theme in advance,to create the theme file accordingly,also in my case its not practical to have numerous files per login in my case.So,My goal is to read the color scheme for a given user from database and be able to assign it to style elements

javascript Change div color based on controller value, I would create a method on your controller to expose the color value to the page in lieu of a complicated IF() or CASE() statement written directly in the page. How to Show and Hide div elements using radio buttons? In order to display data/content of a specific element by selecting the particular radio button in jQuery we can use the following two methods: hide() methods: This method is used to hiding the syntax or the element of html that you want to hide.

Use CSS to change the style of each row depending on the content , Display element B if element A's attribute is empty; 3. Display and style elements depending on their value. 1. Display background:lightgrey } .no_grades{ okey, Suppose you want to change your div styling by some condition like below: [code]if($condition==1){ $style='style="background: blue;"'; }else{ $style=&#039;style

Comments
  • How is the value of "flow-hold" being changed? If it's coming from the server this way, just assign a class to it that gives the desired background color.
  • Your JavaScript is invalid, it has unbalanced () parenthesis. Error is around , function(). Did you intend to write .each(function()?
  • @Philip Are you really asking how to write an else if? Or chaining ternary operators? Really?!? --- txt < 100 ? "green" : txt < 200 ? "yellow" : "red"