addAttr not working in jquery?

Question

I have a sample code :

<input type="text" name="color" id="color" value="" />

And jquery

$('#color').change(function(){
    $('#color').addAttr('value', 'test');
});

When I change value in textbox is result value="" and error in firebug $("#color").addAttr is not a function

How to fix it ?

Answer 1

It's called .attr(), not .addAttr().

You should also replace your inner $('#color') with $(this) to indicate that you're manipulating the same input that's being changed:

$('#color').change(function(){
    $(this).attr('value', 'test');
});

Answer 2

You are confused about removeAttr() and you think that addAttr() exists, that's wrong.

The function you want is .attr() - nowadays .prop(), I believe.

Answer 3

You could also do:

$('#color').change(function(){
    $(this).val('test');
});