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 Perform: Part 1

Brendan Therrien
Brendan Therrien
26,180 Points
Posted by Brendan Therrien
Brendan Therrien
26,180 Points

Creating a Mobile Drop Down Menu with JQuery

Hi, I'm learning how to creating a mobile drop down menu in jQuery Basics, but each time I follow the steps I can't get the menu to work. Here is my code:

//Create a select and append to menu.
var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over menu links
$("#menu a").each(function() {
  var $anchor = $(this);

  //Create an option
  var $option = $("<option></option>");

  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  var anchorText = $anchor.text();
  $option.text($anchor.text);
  //append option to select
  $select.append($option);
});

Thanks for the help.

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Brendan Therrien,

I see your problem. The problem is that 2nd to last line from the bottom. $option.text($anchor.text); On this line, you aren't calling the text method correctly, so it can't execute. You should change that line to one of two options:

//Option A - Get rid of anchorText variable creation because it is needless to create
//And just use the text function 
 $option.text($anchor.text());

//Or Option B
//Keep anchorText variable and use it in place of the method call
/* 
var anchorText = $anchor.text();
$option.text(anchorText);
*/
Brendan Therrien
Brendan Therrien
26,180 Points
Brendan Therrien
Brendan Therrien
26,180 Points

I've been busy so I haven't been online since I asked this question. Anyways, thanks, I just used Option B and it worked perfectly.

Marcus Parsons
Marcus Parsons
15,719 Points

No problem! Glad to help, Brendan.

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points 
var anchorText = $anchor.text();

This could cause problems.

var $anchorText = $anchor.text();

Notice the $ sign for var "$"anchorText.

Marcus Parsons
Marcus Parsons
15,719 Points

Prepending a variable with a $ sign is not necessary but it can solve problems. In fact, it can solve problems of using reserved words. For example, you can use var $top just fine. But if you try to use var top it will not allow you to overwrite its contents because it is a protected keyword for JavaScript. So, no, the problem is definitely not with the $ sign at the beginning of the variable. But a variable name such as anchorText is a perfectly acceptable, valid variable name and is not the problem here.