Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Victor Rundbaken
Victor Rundbaken
14,037 Points

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

Christian Andersson
Christian Andersson
8,712 Points

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.

Victor Rundbaken
Victor Rundbaken
14,037 Points

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?

Christian Andersson
Christian Andersson
8,712 Points

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.

Victor Rundbaken
Victor Rundbaken
14,037 Points

Thank you that clears it up!

Marcio Mello
Marcio Mello
7,861 Points
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?