Unable to use css property in jquery

Question

I have a text box in which value is 0 when page loads and I want if there is a 0 value in any numeric box, I want its background color to be changed on page load.

I want to do it using jquery only.

My code for this is not working, please find the demo link below and suggest on mistakes.

http://jsfiddle.net/ph43cuhj/1/

Below is my code:

$(document).ready(function(){
    if($("input:text").val()=='0')
        $(this).css('background-color','#c0c0c0');
});

You have to use a loop to select each input, because currently, $(this) is undefined... — Adriien M
– Adriien M, Commented Sep 9, 2014 at 7:50

Satpal · Accepted Answer · 2014-09-09 07:46:20Z

2

Use

$(document).ready(function () {
    $("input:text").change(function () { //Bind change vent
        if ($(this).val() == '0') {
            $(this).css('background-color', '#c0c0c0');
        }else{
            $(this).css('background-color', '');
        }
    }).change(); //Trigger initally
});

DEMO

answered Sep 9, 2014 at 7:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vaibhav Over a year ago

why we have used .change() for this?

Satpal Over a year ago

@Vaibhav, To trigger when page loads

Kartikeya Khosla · Accepted Answer · 2014-09-09 07:59:55Z

1

Try this :

$(document).ready(function(){
  $('input[type="text"]').each(function(){
    if( $(this).val() == '0' )
    { 
       $(this).css('background-color','#c0c0c0'); 
    }
  });
});

DEMO

EDIT :-

OR Try This :

$(document).ready(function(){
    $('input:text').each(function(){
        if( $(this).val() == '0' )
        { 
           $(this).css('background-color','#c0c0c0'); 
        }
    });
});

DEMO

edited Sep 9, 2014 at 7:59

answered Sep 9, 2014 at 7:46

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Comments

dsuckau · Accepted Answer · 2014-09-09 07:57:37Z

0

More compact:

$(document).ready(function () {
    $('input[type="text"][value="0"]').each(function () {
         $(this).css('background-color','#f00'); 
    });
});

answered Sep 9, 2014 at 7:57

dsuckau

5923 silver badges15 bronze badges

Comments

yugi · Accepted Answer · 2014-09-09 08:01:56Z

0

for(i=0;i<$("body").find("input:text").length;i++)
 {
   var el=$("body").find("input:text").eq(i);
   if(el.val()==0){  el.css('background-color', '#c0c0c0');   }
   else  { el.css('background-color', '#000000');    }
}

try this code in document ready function

answered Sep 9, 2014 at 8:01

yugi

8841 gold badge15 silver badges28 bronze badges

Collectives™ on Stack Overflow

Unable to use css property in jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related