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

JavaScript jQuery Basics (2014) Creating a Mobile Drop Down Menu Setting a value

Hamed Ali
Hamed Ali
5,626 Points
Posted by Hamed Ali
Hamed Ali
5,626 Points

select the correct input, and then set its value to the fullName. Anyone see whats wrong with the final part of my code?

error says: prompt didnt appear in input

js/app.js 
//Show Prompt Window and store value
var fullName = prompt("What is your full name?");

//Select Input with the id of #fullName
var $select = $("<select></select>");       

//Insert value in to full name input

$('#fullName').val (function () {
  $('#fullName').val(fullName);
});
index.html 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="fullName">Full Name</label><input id="fullName" name="fullName" value="" disabled>
<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

2 Answers

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

You're getting too fancy, this challenge is about simpler stuff.

Where it says "Select Input with the id of #fullName", they are talking about an input element that is already in the document. It can be identified by the id "#fullName". Your code is creating a brand new select element, which is not part of the challenge.

Then, where it says "Insert value in to full name input", you can pass the value you got from the prompt directly to the val method of the element you just identified. You won't need to create an anonymous function.

This task is simple enough that if you want, you can combine the instructions from both comments and satisfy them with one line of code.

Keith Ostertag
Keith Ostertag
16,619 Points

Hi Steven (or anyone?)-

I'm still not understanding this, simple as it is.

A name is typed into the prompt box, then is moved into the variable "fullname".

We want to move the content of that variable "fullname" into an input box attribute called "value". The input box has an id = "fullname".

I feel I should be able to simply do:

$("#fullname value").val(fullname);

Why is that not correct? I don't seem to be getting this...

The $ sign makes the input statement with an id of "#fullname" into a jQuery object, correct? Adding a space then "value" inside the parenthesis selects that attribute, correct?

The function "val" should install the contents of the variable "fullname" into the attribute "value". Is it a syntax problem? I've tried all kinds of variations with no joy.

Thanks if you can help, Keith

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

Your selector "#fullname value" is a combined descendant selector that targets a element with the tag name "value" inside another element with the id "fullname". This probably doesn't select anything, particularly since "value" isn't a valid tag name.

A selector of "#fullName" by itself will target the input element that has that id.

Keith Ostertag
Keith Ostertag
16,619 Points

Thanks for replying.

Hmm... #fullname is the id of an input statement that has several attributes, so how to properly identify the specific attribute named "value"? Or are you saying the "value" attribute does not need to be specified? I can't see how "value" isn't a valid tag name. "value" is not an attribute of the input statement?

Could you elaborate?

BTW- $("#fullname").val(fullname); does not work, so I guess I just haven't got your meaning yet.

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

You got it, but you mistyped "fullName". In both cases the "N" is a capital letter but you wrote "fullname" instead.

The selector in the jQuery call is only used to select the element(s). The val function selects the value attribute.

Keith Ostertag
Keith Ostertag
16,619 Points

Thank you Steven.

Gawd, I spent hours struggling with this not noticing that case change in the name... which I should have seen and known... But I guess that will help me notice it in the future!

And thanks for explaining the "val function selects the value attribute". I could not glean that from the documentation at http://api.jquery.com/val/

Joey Ward
PLUS
Joey Ward
Courses Plus Student 22,720 Points
Joey Ward
Joey Ward
Courses Plus Student 22,720 Points

I also recommend checking out AngularJS and discovering the benefits of two-way binding. It will eliminate the need for the lines of code that set the element's value to the value of the JS variable. For instance, you could have $scope.fullName = prompt("Enter your full name") and then with no additional JS or jQuery, your HTML could say <input ng-model="fullName'> and the values would automatically be linked. Check it out.

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

I should point out that Angular is more than a little beyond the scope of the jQuery Basics course. While it certainly has it's own following, you can become a jQuery wizard without ever touching Angular.