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

Posted by robinbehroozi
robinbehroozi
15,912 Points

Trying to combine the JQuery drop down menu and spoiler revealer exercises.

Hey,

I'm trying to combined these 2 exercises from JQuery basics. The problem I'm having is that the menu appears but there are no items in it. Here is my app.js file. 

var $button = ("<button>Read More</button>");

var $select = ("<select></select>");

$("span").hide();

$(".col").append($button);



$("button").click(function(){

  $(this).prev().show();
  $(this).remove();

});



$("#menu").append($select);



$("#menu a").each(function(){


var $anchor = $(this);

var $anchorlink = $anchor.attr("href");

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


if($anchor.parent().hasClass("selected")){

     $option.prop("selected", true);
};



var $linkText = $anchor.text();

$option.text($linkText);

$select.append($option);

$option.val($anchorlink);


  });



$select.change(function(){

  window.location = $select.val();

});

Any help would be appreciated. Thanks.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

What does the HTML for this look like? Are you seeing any errors in the JavaScript console?

robinbehroozi
robinbehroozi
15,912 Points

Yes, I'm seeing this error in the console...

TypeError: $select.append is not a function

here is the index.html file

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Yoga Canada SportsWear</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main-wrapper">



      <header class="main-header">

        <img src="yoga_dude_medium.png" alt="Yoga Canada SportsWear Logo" class="main-logo">

        <div id="menu">
          <ul>

              <li class="selected">
                  <a href="index.html">Home</a>
              </li>

              <li>
                  <a href="about.html">About Us</a>
              </li>

              <li>
                  <a href="contact.html">Contact Us</a>
              </li>

          </ul>

        </div>
      </header>
      <div class="content-row">
        <div class="primary-content col">
          <h2>Fall Sale on Now / Up to 40% off </h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum semper facilisis. Vestibulum feugiat bibendum nisl, eget porttitor turpis blandit eget. Suspendisse sit amet nisi mollis, ultricies nulla molestie, iaculis metus. Integer aliquam vehicula facilisis. Vestibulum id porta nisl. Duis diam leo, vulputate et nibh ut, aliquet sagittis est. Nunc in nisl accumsan sem malesuada varius. Duis iaculis sapien nec vehicula finibus. Aliquam non porta dui, at efficitur sapien. Nullam scelerisque hendrerit nibh et facilisis.

Nam feugiat faucibus neque, at pulvinar dolor scelerisque eget. Ut sed sem in turpis viverra aliquam eu ac velit. In massa nibh, pulvinar a ex in, dignissim volutpat nunc. Nunc tempus metus eget nibh elementum hendrerit. Cras ultrices tristique tempor. Praesent tempus nec sem ut elementum. Vestibulum tincidunt, ante nec dictum consectetur, lorem urna scelerisque nunc, sed porttitor libero erat eu enim. Sed eget posuere urna, ac eleifend mauris. Vestibulum dapibus, metus ut imperdiet auctor, magna sem fermentum nulla, id lacinia massa enim ut nunc. Mauris dictum mattis sodales. Mauris dapibus mi vel tellus facilisis, non consectetur enim congue. Mauris vitae mollis enim. Nam pellentesque elit id consequat hendrerit. In quis ultricies erat. Mauris sagittis nibh et diam faucibus porttitor. Donec tincidunt dignissim diam, in convallis odio.
            </p>

<span class="one">
Morbi at lacinia odio, sit amet volutpat nisi. Nullam porttitor magna a ultrices euismod. Nunc malesuada aliquet nisi ut euismod. Mauris suscipit consequat orci. Nulla malesuada eget elit sit amet malesuada. Nam vel cursus diam. Suspendisse faucibus massa eu felis vehicula facilisis. Phasellus orci nisl, sollicitudin ac pretium at, semper eu velit. Fusce pretium, nibh sit amet tristique sodales, nunc lorem pulvinar ipsum, in porttitor ligula elit et ligula. Donec gravida vel leo nec viverra. Proin quis nunc nec eros consectetur rutrum. Morbi sit amet posuere dolor, sed ultricies nulla. Nulla maximus, augue a finibus eleifend, nisl eros cursus eros, vitae congue turpis ante nec orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam finibus risus et sollicitudin euismod. Etiam placerat nisl nec auctor rutrum.

Nam sit amet consectetur mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sit amet velit accumsan nisl porttitor vehicula. Maecenas sem tellus, maximus ut ligula in, aliquet scelerisque massa. Suspendisse et tristique nunc, quis finibus dui. Donec placerat massa non erat sagittis ultricies. Curabitur at nulla et ante viverra placerat in venenatis ex. Fusce in pretium justo, non egestas mi. Praesent fermentum sodales aliquam. Etiam vestibulum volutpat vulputate. Quisque felis justo, mattis luctus tortor vitae, pulvinar pretium justo.

Fusce id aliquet metus. In sit amet ullamcorper eros, eu porta erat. Donec blandit orci sed enim euismod porta. Curabitur mattis lobortis eleifend. Mauris lobortis elit a elit sollicitudin, vel suscipit augue facilisis. Suspendisse congue massa vitae libero porttitor, sed mollis nunc eleifend. Sed bibendum iaculis est et pretium. Cras consequat finibus metus. Nulla arcu lorem, imperdiet eget dignissim eget, placerat nec ex.</span>
        </div>
        <div class="secondary-content col">
          <h2>YCS gives back to community</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum semper facilisis. Vestibulum feugiat bibendum nisl, eget porttitor turpis blandit eget. Suspendisse sit amet nisi mollis, ultricies nulla molestie, iaculis metus. Integer aliquam vehicula facilisis. Vestibulum id porta nisl. Duis diam leo, vulputate et nibh ut, aliquet sagittis est. Nunc in nisl accumsan sem malesuada varius. Duis iaculis sapien nec vehicula finibus. Aliquam non porta dui, at efficitur sapien. Nullam scelerisque hendrerit nibh et facilisis.

Nam feugiat faucibus neque, at pulvinar dolor scelerisque eget. Ut sed sem in turpis viverra aliquam eu ac velit. In massa nibh, pulvinar a ex in, dignissim volutpat nunc. Nunc tempus metus eget nibh elementum hendrerit. Cras ultrices tristique tempor. Praesent tempus nec sem ut elementum. Vestibulum tincidunt, ante nec dictum consectetur, lorem urna scelerisque nunc, sed porttitor libero erat eu enim. Sed eget posuere urna, ac eleifend mauris. Vestibulum dapibus, metus ut imperdiet auctor, magna sem fermentum nulla, id lacinia massa enim ut nunc. Mauris dictum mattis sodales. Mauris dapibus mi vel tellus facilisis, non consectetur enim congue. Mauris vitae mollis enim. Nam pellentesque elit id consequat hendrerit. In quis ultricies erat. Mauris sagittis nibh et diam faucibus porttitor. Donec tincidunt dignissim diam, in convallis odio.</p>
<span class="two">
Morbi at lacinia odio, sit amet volutpat nisi. Nullam porttitor magna a ultrices euismod. Nunc malesuada aliquet nisi ut euismod. Mauris suscipit consequat orci. Nulla malesuada eget elit sit amet malesuada. Nam vel cursus diam. Suspendisse faucibus massa eu felis vehicula facilisis. Phasellus orci nisl, sollicitudin ac pretium at, semper eu velit. Fusce pretium, nibh sit amet tristique sodales, nunc lorem pulvinar ipsum, in porttitor ligula elit et ligula. Donec gravida vel leo nec viverra. Proin quis nunc nec eros consectetur rutrum. Morbi sit amet posuere dolor, sed ultricies nulla. Nulla maximus, augue a finibus eleifend, nisl eros cursus eros, vitae congue turpis ante nec orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam finibus risus et sollicitudin euismod. Etiam placerat nisl nec auctor rutrum.

Nam sit amet consectetur mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sit amet velit accumsan nisl porttitor vehicula. Maecenas sem tellus, maximus ut ligula in, aliquet scelerisque massa. Suspendisse et tristique nunc, quis finibus dui. Donec placerat massa non erat sagittis ultricies. Curabitur at nulla et ante viverra placerat in venenatis ex. Fusce in pretium justo, non egestas mi. Praesent fermentum sodales aliquam. Etiam vestibulum volutpat vulputate. Quisque felis justo, mattis luctus tortor vitae, pulvinar pretium justo.</span>
        </div>
        <div class="extra-content col lastcol">
        <h2>New Fall Lineup</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum semper facilisis. Vestibulum feugiat bibendum nisl, eget porttitor turpis blandit eget. Suspendisse sit amet nisi mollis, ultricies nulla molestie, iaculis metus. Integer aliquam vehicula facilisis. Vestibulum id porta nisl. Duis diam leo, vulputate et nibh ut, aliquet sagittis est. Nunc in nisl accumsan sem malesuada varius. Duis iaculis sapien nec vehicula finibus. Aliquam non porta dui, at efficitur sapien. Nullam scelerisque hendrerit nibh et facilisis.

Nam feugiat faucibus neque, at pulvinar dolor scelerisque eget. Ut sed sem in turpis viverra aliquam eu ac velit. In massa nibh, pulvinar a ex in, dignissim volutpat nunc. Nunc tempus metus eget nibh elementum hendrerit. Cras ultrices tristique tempor. Praesent tempus nec sem ut elementum. Vestibulum tincidunt, ante nec dictum consectetur, lorem urna scelerisque nunc, sed porttitor libero erat eu enim. Sed eget posuere urna, ac eleifend mauris. Vestibulum dapibus, metus ut imperdiet auctor, magna sem fermentum nulla, id lacinia massa enim ut nunc. Mauris dictum mattis sodales. Mauris dapibus mi vel tellus facilisis, non consectetur enim congue. Mauris vitae mollis enim. Nam pellentesque elit id consequat hendrerit. In quis ultricies erat. Mauris sagittis nibh et diam faucibus porttitor. Donec tincidunt dignissim diam, in convallis odio.</p>
<span class="three">
Morbi at lacinia odio, sit amet volutpat nisi. Nullam porttitor magna a ultrices euismod. Nunc malesuada aliquet nisi ut euismod. Mauris suscipit consequat orci. Nulla malesuada eget elit sit amet malesuada. Nam vel cursus diam. Suspendisse faucibus massa eu felis vehicula facilisis. Phasellus orci nisl, sollicitudin ac pretium at, semper eu velit. Fusce pretium, nibh sit amet tristique sodales, nunc lorem pulvinar ipsum, in porttitor ligula elit et ligula. Donec gravida vel leo nec viverra. Proin quis nunc nec eros consectetur rutrum. Morbi sit amet posuere dolor, sed ultricies nulla. Nulla maximus, augue a finibus eleifend, nisl eros cursus eros, vitae congue turpis ante nec orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam finibus risus et sollicitudin euismod. Etiam placerat nisl nec auctor rutrum.
</span>

.
         </div>
      </div>
      <footer class="main-footer">
        Copyright Yoga Canada Sportswear &copy; 2014 All Rights Reserved
      </footer>



    </div>

    <script src="jquery.js"></script>
    <script src="app.js"></script>
  </body>
</html>

1 Answer

Vince Brown
Vince Brown
16,249 Points

Hey Robin, When you create your variable $select you are just setting it equal to a select element.

so when you call your append function later in your js file it is not chained to a proper jquery selector

I think if you switch the $select variable to this

var $select = $( '<select></select>' );

// and later call append

$select.append($option);

// which would translate to

$( '<select></select>' ).append($option);

It should work, I didnt get a chance to test it but just from observation and making this mistake plenty of times myself. also you should var button to same format I believe. I hope it works!

-Vince

robinbehroozi
robinbehroozi
15,912 Points

Oh my God….that's it…it works now!!! Silly me, I forgot to put the $ in front of ``` $("<select></select>");

Thank you Vince.