When I remove the code like in the last video I get a error

Question

I'm doing the same stuff as in the video but the challange says that it's wrong.

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>");
$("$select").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>

Answer 1 · 2015-02-25T13:49:12Z

February 25, 2015 1:49pm

It's asking that you remove line 27. Just delete it completely.

The line that was originally $("#menu").append($button);

You've changed it to $("$select").append($button); in your code.

Also, if you did want to target the $select variable, you wouldn't use quotes around it. You would just use $($select).append($button);

//Create button 
var $button = $( "< button > Go < /button>" );
$("$select").append($button); // 1 of 2 Remove this line.
//Bind click to button
$button.click(function(){  // 2 of 2 modify this so that instead of listening for a $button click, it
                          // listens for a change in the $select
  //Go to select's location
  window.location = $select.val();
});

Welcome to the Treehouse Community

Looking to learn something new?

Marco Koopman

Marco Koopman

When I remove the code like in the last video I get a error

1 Answer

Colin Bell

Colin Bell