Need script to change div background via input

Question

When I go back and erase the data leaving the input field blank, the background does not go back to it's original color UNLESS I TYPE A "0".

I need the background color of the DIV to revert back to its original color when blank.

What am I doing wrong?

<script>
$(document).ready(function() {

    $("#id").keypress(function() {
        if ($("#id").val().length > 0) $("#in").css("background-color", "red");
        else {
            if ($("#id").val().length == 0) $("#in").css("background-color", "grey");
        }
    });

});
</script>

Why are you testing the .length a second time? That's what the else is for. — Blazemonger
– Blazemonger, Commented Apr 9, 2012 at 13:57

Rory McCrossan · Accepted Answer · 2012-04-09 14:06:21Z

3

The problem is because you are using keypress which is called before the action of the key is executed. If you used keyup this will work:

$("#id").keyup(function() {
    if ($(this).val().length > 0) {
        $("#in").css("background-color", "red");
    }
    else {
        $("#in").css("background-color", "grey");
    }
});

Also, as @mblase75 pointed out, you do not need to test the length of the value in the else condition.

Example fiddle

If you wanted to simplify this code even further, you can simply use a ternary statement with .val().length as the condition, as a positive integer will equate to true:

$("#id").keyup(function() {
    $(this).css("background-color", $(this).val().length ? "red" : "grey");
});

edited Apr 9, 2012 at 14:06

answered Apr 9, 2012 at 14:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Comments

James Johnson · Accepted Answer · 2012-04-09 14:08:17Z

2

You would want to use keyup to account for the character that was just entered:

$(function(){
    $("#id").keyup(function() {
        $("#in").css("background-color", $(this).val().length > 0 ? "red" : "grey");
     });
 });

Here's a jsFiddle to demonstrate.

edited Apr 9, 2012 at 14:08

answered Apr 9, 2012 at 14:02

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

1 Comment

Blazemonger Over a year ago

You've used this for both #in and #id.

Leniel Maccaferri · Accepted Answer · 2012-04-09 14:00:59Z

0

This one should work...

<script>

$(document).ready(function() {

    $("#id").keyup(function() {
        if($("#id").val().length > 0) {
           $("#in").css("background-color", "red");
        }
        else {
           $("#in").css("background-color", "grey");
        }
    });
});

</script>

answered Apr 9, 2012 at 14:00

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

1 Comment

James Johnson Over a year ago

I don't think keypress will work for what OP is trying to do.

Stanislav Gamaiunov · Accepted Answer · 2012-04-09 14:20:56Z

0

In your case, 'keypress' event has called before input.val().length changed. And your code run selector retreiving five times, insted one.

Look to this code, it works fine:

html:

<input id="id" type="text" autocomplete="off">
<div class="in"></div>

css:

.in {width:200px; height:20px; background-color:#grey;}
.in-red {background-color:red;}

js:

$(function(){
    var $in = $('.in');
    $('#id').on('keyup', function(){
        $this = $(this);
        if ($this.val().length > 0) {
            $in.addClass('in-red');
        } else {
            $in.removeClass('in-red');
        }
    });
});

And you can test it on http://jsfiddle.net/Qhkev/1/

answered Apr 9, 2012 at 14:20

Stanislav Gamaiunov

3532 silver badges7 bronze badges

Comments

Daniel Cumings · Accepted Answer · 2012-04-09 14:09:45Z

-2

Use keyup

<script>
$(document).ready(function(){

$("#id").keyup(function() {
    if($("#id").val().length > 0) $("#in").css("background-color", "red");
  else {
    if($("#id").val().length == 0) $("#in").css("background-color", "grey");
 }

 });
 });
 </script>

answered Apr 9, 2012 at 14:09

Daniel Cumings

8738 silver badges14 bronze badges

1 Comment

Daniel Cumings Over a year ago

If you vote down please comment why the vote down. I tested this answer before posting and it works.

Collectives™ on Stack Overflow

Need script to change div background via input

5 Answers 5

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related