Toggling color of Text Input with Button click - jQuery

Question

$("#btn").button().click(function() {
    $("#textinput").css('color',function(clr) {
        if ($("#textinput").css('color') == '#000000')
            return '#ff0000';
        else
            return '#000000';
    });
});

for some reason I cant toggle between the colors in input text. the .css docs of jQuery states the following:

Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

in general, how can i get the property value of UI object (css values are constant?) ?

thnx!

Rumplin · Accepted Answer · 2012-07-20 06:51:25Z

1

I would create a class .white and a class .black and use .addClass() and .removeClass(). A html element can have multiple classes set

$("#btn").button().click(function() { 
    if ($("#textinput").hasClass("white"))
    {
        $("#textinput").removeClass("white").addClass("black");
    }
    else {
        $("#textinput").removeClass("black").addClass("white");
    }
});

I think someone will post a more elegant solution to this, because I think this is too much code for a simple task like this.

update: Use toggleClass instead: http://api.jquery.com/toggleClass/

answered Jul 20, 2012 at 6:51

Rumplin

2,78822 silver badges46 bronze badges

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

2 Comments

David Thomas Over a year ago

I'd suggest toggleClass(), but essentially, this is the answer.

Rumplin Over a year ago

Thanks, I knew there was a nicer solution to this. I updated my anwser

Collectives™ on Stack Overflow

Toggling color of Text Input with Button click - jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related