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
Roel Bakkum
5,921 PointsJavascript Console is giving me errors apparently in the minified jquery file?
I'm getting this response in the Javascript Console:
jquery-3.2.1.slim.min.js:3 Uncaught TypeError: this.empty is not a function at HTMLOptionElement.<anonymous> (jquery-3.2.1.slim.min.js:3) at T (jquery-3.2.1.slim.min.js:3) at HTMLOptionElement.text (jquery-3.2.1.slim.min.js:3) at T (jquery-3.2.1.slim.min.js:3) at r.fn.init.text (jquery-3.2.1.slim.min.js:3) at HTMLAnchorElement.<anonymous> (app.js:19) at Function.each (jquery-3.2.1.slim.min.js:2) at r.fn.init.each (jquery-3.2.1.slim.min.js:2) at app.js:11 (anonymous) @ jquery-3.2.1.slim.min.js:3 T @ jquery-3.2.1.slim.min.js:3 text @ jquery-3.2.1.slim.min.js:3 T @ jquery-3.2.1.slim.min.js:3 text @ jquery-3.2.1.slim.min.js:3 (anonymous) @ app.js:19 each @ jquery-3.2.1.slim.min.js:2 each @ jquery-3.2.1.slim.min.js:2 (anonymous) @ app.js:11
Am I doing something wrong? This is my app.js file:
//Problem: It looks gross in smaller browser widths and devices //Solution: To hide the text links and swap them out with a more appropriate naviagtion
var $select = $("<select></select>");
//Creat a select and append to menu
$("#menu").append($select);
//Cycle over menu links $("#menu a").each(function(){ var $anchor = $(this); //Creat an option var $option = $("<option></option>"); //options's value is the href $option.val($anchor.attr("href")); //option's text is the text of link var anchorText = $anchor.text; $option.text(anchorText); //append option to select $select.append($option); });
//create button //click button // to go to selects's location //Modify CSS to hide links on small resolution and show button and select //Also hides select and button on larger screens and show's links //Deal with selected options depending on current page
6 Answers
Alexander La Bianca
15,959 PointsThanks! The problem is in fact in your javascript file. The issue is that you are doing:
var anchorText = $anchor.text;
Now the problem is that .text is a function, so you are assigning a function to var anchorText. But I am assuming you want the text content and not the function reference. So simply do:
var anchorText = $anchor.text();
That should return the actual text content and fix your error :)
Alexander La Bianca
15,959 PointsI think the line that is throwing the error is the one below. As the error mentions an anonymous function and 'this'. My first guess is that you are trying to get 'this' via jquery's '$' however 'this' in the below case is referring to the anonymous function. Not sure if that is what you want.
$("#menu a").each(function(){ var $anchor = $(this);
I need to look more into it, but can you do me a favor and post your code in a formatted version?
You can do this by typing 3 backticks and then the programing language like:javascript then underneath enter all your code. To close the block simply add another set of backticks ```
Roel Bakkum
5,921 PointsSo this is the code i get back from the console:
jquery-3.2.1.slim.min.js:3 Uncaught TypeError: this.empty is not a function at HTMLOptionElement.<anonymous> (jquery-3.2.1.slim.min.js:3) at T (jquery-3.2.1.slim.min.js:3) at HTMLOptionElement.text (jquery-3.2.1.slim.min.js:3) at T (jquery-3.2.1.slim.min.js:3) at r.fn.init.text (jquery-3.2.1.slim.min.js:3) at HTMLAnchorElement.<anonymous> (app.js:19) at Function.each (jquery-3.2.1.slim.min.js:2) at r.fn.init.each (jquery-3.2.1.slim.min.js:2) at app.js:11 (anonymous) @ jquery-3.2.1.slim.min.js:3 T @ jquery-3.2.1.slim.min.js:3 text @ jquery-3.2.1.slim.min.js:3 T @ jquery-3.2.1.slim.min.js:3 text @ jquery-3.2.1.slim.min.js:3 (anonymous) @ app.js:19 each @ jquery-3.2.1.slim.min.js:2 each @ jquery-3.2.1.slim.min.js:2 (anonymous) @ app.js:11
And this is my script:
//Problem: It looks gross in smaller browser widths and devices
//Solution: To hide the text links and swap them out with a more appropriate naviagtion
var $select = $("<select></select>");
//Create a select and append to menu
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function(){
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//options's value is the href
$option.val($anchor.attr("href"));
//option's text is the text of link
var anchorText = $anchor.text;
$option.text(anchorText);
//append option to select
$select.append($option);
});
//create button
//click button
// to go to selects's location
//Modify CSS to hide links on small resolution and show button and select
//Also hides select and button on larger screens and show's links
//Deal with selected options depending on current page```
Alexander La Bianca
15,959 PointsCan you post your html as well?
Roel Bakkum
5,921 Points<!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="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>```
Roel Bakkum
5,921 PointsYou have no idea how happy I'm that you found it! Thank you :). Did you find the error because of what the Java Console returned or by just looking over the code? I couldn't really make sense of the return the javaconsole gave me.
Alexander La Bianca
15,959 PointsI ran the program in my browser after you provided the code for the html. I then saw the same error you provided at the very top. I googled the error and it hinted at the .text method. I then looked at your code and saw that you did not use .text correctly. I have made this same mistake so many times which is why I did not catch it right away