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 Working with jQuery Collections Stopping the Browser's Default Behavior

Syntax Issue in Text Editor?

My Line 9 matches Treasure's Line 4 exactly, yet Visual Studio Code gives me these errors:

[js] ',' expected. (9, 45)
[js] ',' expected. (9, 53)

Also, Chrome Dev Tools gives me this error:

Uncaught SyntaxError: missing ) after argument list

Here's my JS code:

const $odd = $('a:odd');
//$odd.hide(); <-- EXAMPLE ONLY, COMMENTED OUT ... this will block all a elements that are 1, 3, 5.  Remember, the first a counts as 0. No for loop necessary! This is the beauty of jQuery. It loops on its own.
const $secureLinks = $('a[href^="https://"]'); /* On the right, jQuery is used to target links that "start with" (^) "https", then that gets stored in the variable $secureLinks */
// This is just a quick way to test that $secureLinks targets Lines 12 & 14-15, as it should ... preview should HTTPS links hidden, as it should ... commenting out afterwards as, again, it's just a quick method to test.
//$secureLinks.hide();
const $pdfs = $('a[href$=".pdf"]'); /* On the right, jQuery is used to target links that "end with" ($) ".pdf", then that gets stored in the variable $pdfs */
//$pdfs.hide(); <-- This was just a quick test to see if above code works. It does.
//Created variable below to ensure my JavaScript was unobtrusive, meaning that if JS fails to work for any reason, this link won't be hanging around in HTML.
const $pdfCheckbox = $('<label><input type='checkbox'> Allow PDF downloads</label>');

//Use jQuery's attribute method to target $secureLinks' target attribute and change the target attribute to _blank...
$secureLinks.attr('target', '_blank');

//Use jQuery's attribute method to target $pdfs download attribute and have the browser download the PDF upon the link getting clicked
$pdfs.attr('download', true);

//Use jQuery's CSS method to change every odd link to gray
//$odd.css('backgroundColor', 'lightgrey');
// Note: If this were CSS, you'd instead use 'background-color" ... this rarely will be used in actual practice, so it's just a quirky example

//Use jQuery's addClass method to associate $secureLinks with the "secure" class as defined in CSS, which will place a green "safe" flag next to ever HTTPS link
$secureLinks.addClass('secure');

//Use jQuery's addClass method to associate $pdfs with the "a.pdf:after" class in CSS ... this will place a red "LOCKED" flag per CSS
$pdfs.addClass('pdf');

//Use jQuery's "on" method
$pdfs.on('click', function (event){
    //check if checkbox has been checked
    //if zero checkboxes are checked (one check = length+1)
    if ($(':checked').length === 0) {
        //prevent download of document (by overruling browser's default behavior)
        event.preventDefault();
        //alert the user
        alert('Please check the box to allow PDF downloads.');
    }
        //prevent download of document

    //else allow the download

});

//Append $pdfCheckbox to the #links container from HTML to ensure unobtrusive JavaScript (if JS disabled, checkbox serves no purpose, therefore no need to show this warning).
$('#links').append($pdfCheckbox);

What's the issue? Everything else worked well up until that point. Ironically, trying to make JavaScript unobtrusive seems to have broken all JavaScript entirely. :-)

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! It doesn't quite match Treasure's. Close! Take another look at around 7:35 in the video.

You wrote:

const $pdfCheckbox = $('<label><input type='checkbox'> Allow PDF downloads</label>');

But because you started that string with single quotes, it thinks that the end of the string is the next single quote, and that happens right before the word checkbox. What is needed here is double quotes around "checkbox".

const $pdfCheckbox = $('<label><input type="checkbox"> Allow PDF downloads</label>');

Hope this helps! :sparkles:

That's the fix! Thank you.

What's interesting is that I literally copied and pasted what was in Workspaces into my text editor, building the files locally. (I don't download the project files because they're in the final form and I prefer to code alongside the narrator.)

I also didn't realize how important single and double quotes are, which is a bit alarming given that I'm about 70 hours into Treehouse lessons on HTML/CSS/JS. Your explanation makes good sense, though. Thanks again.

I Dilate
I Dilate
3,983 Points

Hey Sam,

Often your text editor will give you a clue to a problem like this.

If you look at how your JavaScript code has been colour coded above, you'll see everything after the problem area highlighted in orange. This indicates that it's not being interpreted in the same way as everything above it.

Even if the colours don't tell you exactly WHAT the problem is, they can give you a pretty useful indication of WHERE the problem is.

It can be a useful clue to get your debugging started when something goes wrong, and most text editors that are set up properly will colour code appropriately for the programming language you're using once the file is saved with the appropriate extension.

Thank you! VSC color-coded and even underlined the problematic area for me; it simply never occurred to me that the single quotation marks I used were problematic. Now I've learned!

Sebastian Feuster
Sebastian Feuster
9,445 Points

Hey, i had the same issue and i'm proud, that i found the solution by myself in my early stage 8).

The issue is, that Treasure just copied the code from the HTML file and i'm sure, that every student can copy the code correctly, too. But in the workspace the HTML code from the checkbox is written with single quotes and that mess up the students code, if the student works with single quotes as well.

In Treasure's example video the code from the label is pre-written with double quotes, so she doesn't have to change this line.

In short: If you have issues with the last step, check the single and double quotes

Happy learning