Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics Understanding jQuery Events and DOM Traversal Adding New Elements to the DOM

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

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!

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