Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 1

Why use .val() instead of .attr("value")?

Why use .val() instead of .attr("value")? Is there a difference other than .val being shorter and simpler?

2 Answers

Hey Victor,

There is actually quite a big difference between .val() and .attr("value"). The former gets the objects desired value (from the HTML code) whereas the latter gets the objects actual value once the HTML document is created.

For example, you could have an object and give it an X value, but then later in your code change its' value to Y with javascript. So the .attr("value") would return X here (because that's what you set the attribute to) whereas the .val() would return Y (because that's what it ended up with).

Hope that helps.

That does clear it up thanks! So does JavaScript store the initial value somewhere/the initial value is still in the html or does the .attr() function run before other functions that modify the value or something? Just trying to figure out how it gets the desired value instead of the modified value.

Also, what would happen if you were trying to get .attr("href") of an href that has been changed? Is there another function like val() for all the other attributes that could potentially be set differently than initial?

My comment about the javascript was only to give an example where the value of the object changes after the HTML document is created - as a lack of a better example. But to answer your question I don't believe that javascript "remembers" the initial values of attributes, and so if you changed the value attribute both .attr("value") and .val() will return the same result. But an objects value isn't always about what an attribute is set to.

I did some googling to find an example, and this is what I found:

<input id ="myfile" type="file"/>
alert($(this).attr('value'));
alert($(this).val());

in this situation the .attr method would return 'undefined', as there is no value attribute and because when the HTML document was created there was no file selected (it is a user input field for uploading files which can be used only once the HTML document has been created). The val() however would give the current file-name of the uploaded file.

So basically, use the .attr when you want to specifically use what the attribute holds, and .val() when you want to take the current value.

Thank you that clears it up!

Marcio Mello
Marcio Mello
7,861 Points

The example was a "getter" one. What about the setter (like in the video)?

For instance:

The code was written as:

$option.val($anchor.attr("href"));

I did some experimentation and re-wrote that line as:

$option.attr("value", $anchor.attr("href"));

The result was the same. is there any sistuation where these two codes would result in different outcomes?