CODEWITHSUNDEEP
javascriptjquerycss
Noah Howard
Noah Howard

Reputation: 49

jQuery How to change CSS if value is greater than 1

Alright so there is already an answer to this but I am trying to do the exact same thing, but I've same another css class to "call" this script.

Example: I have this calling to messages, when the content inside messages is over 0 it will change the background color, what I would like to do is change the bottom border on ".root_panel" to the same color as the messages. I'm very new to JavaScript.

Script: 

$(document).ready(function () 
{
   $(".messagess").each(function() 
    {
      var el = $(this);
      var value = parseFloat(el.text());
      if (value > 0) 
         {
            el.css("background","#6E8A75").css("color","#fff");
         }
      else
         {
            el.css("color", "#fff"); 
         }
    }); 
});

Upvotes: 4

Views: 1333

Answers (1)

Juliver Galleto
Juliver Galleto

Reputation: 9037

see my answer as a reference, hope this help.

$(document).ready(function(){
  $("button").click(function(){
    if($("#zero").val() <= 0){
      $(".root_panel").css({ 'border-bottom' : '2px solid red' });
    }else if($("#zero").val() === "1"){
      $(".root_panel").css({ 'border-bottom' : '2px solid blue' });
    }else if($("#zero").val() === "2"){
      $(".root_panel").css({ 'border-bottom' : '2px solid green' });
    }else if($("#zero").val() === "3"){
      $(".root_panel").css({ 'border-bottom' : '2px solid violet' });
    }else if($("#zero").val() === "4"){
      $(".root_panel").css({ 'border-bottom' : '2px solid pink' });
    }else if($("#zero").val() === "5"){
      $(".root_panel").css({ 'border-bottom' : '2px solid gray' });
    }else if($("#zero").val() === "6"){
      $(".root_panel").css({ 'border-bottom' : '2px solid black' });
    }else if($("#zero").val() === "7"){
      $(".root_panel").css({ 'border-bottom' : '2px solid orange' });
    }else{
      $(".root_panel").css({ 'border-bottom' : 'none' });
    } 
    
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="root_panel" style="overflow: auto;">root panel</div>


<button>button</button>
<input type="text" id="zero" />

Upvotes: 2

Related Questions