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

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,240 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!

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