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 Understanding jQuery Events and DOM Traversal Adding New Elements to the DOM

Posted by rhupp
rhupp
11,019 Points

If JavaScript is disabled, wouldn't any file ending in '.js' automatically be ignored?

I've quintuple-checked the code, but here it is for the sake of argument:

const $button = $("<button>Reveal Spoiler</button>");

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

// hide spoiler on page load

$(".spoiler span").hide();

// when button is clicked
$(".spoiler button").click(() =>{
    // show spoiler 
    $(".spoiler span").show();

    // code for more elaborate effects
    /* $(".spoiler button")
        .slideDown("slow")    
        .hide(1000);
    $(".spoiler span")
        .fadeIn(2000)
        .css("display", "block"); */

    // hide button
    $(".spoiler button").hide();
});

The fact is that when I have JavaScript disabled as shown in the video, neither the spoiler text nor button show up. When I reenable it, I achieve basic functionality.

Here is a snapshot of the workspace.

After all this trouble, I think my response to a similar real world situation in which a user didn't have JavaScript would be to politely suggest they go get it. :)

UPDATE:

// face_palm

Never mind. There won't be a button at all without JavaScript; just the spoiler. The reason the spoiler text doesn't show up in the code is because I previously set its CSS to 'display: none;' so it wouldn't briefly appear and disappear, thus defeating the purpose of the spoiler button.

(Let's finish the video first next time, lwg...)

But it does beg one more question: How would I both 'progressively enhance' this app and prevent the spoiler text from displaying if JavaScript is present? A simple conditional statement?

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

Hello

There are many ways of doing this but one that is the more straight forward, is to have a style only show if a "no javascript" class is present.

That way you can have a usable app with or without JavaScript without them interfering.

Example

body.no-js {

    .spoiler:hover span {
        display: block;
    }
}

.spoiler span {
    display: none;
}

and in your JQuery have some sort of initialization that removes the class

$('body').removeClass('no-js');

This allows a user without JS to still have a working app with the use of only styling.

Also, if you dont want to add no-js everywhere, you can do it the opposite way with the not pseudo

body:not(.js-enabled) {

    .spoiler:hover span {
        display: block;
    }
}

.spoiler span {
    display: none;
}

$('body').addClass('js-enabled');

Good Luck!

rhupp
rhupp
11,019 Points

Thank you, Liam! This is very high-level, and that will help me learn faster. Will definitely implement this.