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 Using change()

Posted by MUZ141009 Kenneth Dohwe
MUZ141009 Kenneth Dohwe
8,269 Points

um a bit confused here, Remove the code that appends the button to the #menu, but keep the $button variable. help pliz

sum1 to assist

js/app.js 
//Problem: It look gross in smaller browser widths and small devices
//Solution: To hide the text links and swap them out with a more appropriate navigation

//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>");

  //Deal with selected options depending on current page
  if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }
  //option's value is the href
  $option.val($anchor.attr("href"));
  //option's text is the text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);
});
//Create button 
var $button = $("<button>Go</button>");
$("#menu").append($button);
var $button = $("Go"); $("#menu").append($button);
//Bind click to button
$button.click(function(){
  //Go to select's location
  window.location = $select.val();
});
index.html 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div id="menu">
        <ul>
            <li class="selected"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="support.html">Support</a></li>
            <li><a href="faqs.html">FAQs</a></li>
            <li><a href="events.html">Events</a></li>
        </ul>
    </div>
    <h1>Home</h1>
    <p>This is the home page.</p>
    <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>

4 Answers

Alexandre Ribeiro
Alexandre Ribeiro
29,091 Points
Alexandre Ribeiro
Alexandre Ribeiro
29,091 Points

Hey guys,

We need to change the object that is been referred to as well. In this case $button to $select:

var $button = $("<button>Go</button>"); $("#menu").append($button) --> REMOVE the append method in order to prevent an unintended action; //Bind click to button $button.click(function(){ --> SUBSTITUTE the object referred $button to $select and it's ACTION METHOD from click() to change() //Go to select's location window.location = $select.val(); });

var $button = $("<button>Go</button>");
$("#menu");
$select.change(function(){
  window.location = $select.val();
});
MUZ140877 Nokuthula Mahlangu
MUZ140877 Nokuthula Mahlangu
6,149 Points
MUZ140877 Nokuthula Mahlangu
MUZ140877 Nokuthula Mahlangu
6,149 Points

leave your line 27 like this $("#menu");

Archana V
Archana V
4,853 Points
Archana V
Archana V
4,853 Points

you need to remove .append($button); from the 27th line.

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Take a look at the code below this should help. if you have any more questions please feel free to ask. 

//Create button 
var $button = $("<button>Go</button>");
$("#menu").append($button);//remove the code .append($button); here
var $button = $("Go"); $("#menu").append($button);
//Bind click to button
$button.click(function(){
  //Go to select's location
  window.location = $select.val();
});
MUZ141009 Kenneth Dohwe
MUZ141009 Kenneth Dohwe
8,269 Points

stil it's nt working, it's saying, 'Bummer! Remove the code around line 27 that appends $button to #menu' //Create button var $button = $("<button>Go</button>"); $("#menu").append($button);

Jacob Mishkin
Jacob Mishkin
23,118 Points

can you post your code of what you are removing?