SOLVED: Undeclared Document

JavaScript
1

How do I clear these up?

var playButtons = document.querySelectorAll(".playButton");



(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide");
    }

    function hide(el) {
        el.classList.add("hide");
    }

    function getPlayButton(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function playButton(button) {
        var player = button.querySelector("audio");
        var play = button.querySelector(".play");
        var pause = button.querySelector(".pause");
        var speaker = button.querySelector(".speaker");
        button.classList.add("clicked");
        player.volume = 1.0;
        hide(pause);
        hide(speaker);
        if (player.paused) {
            hide(play);
            show(pause);
            player.play();
        } else {
            show(play);
            hide(pause);
            player.pause();
        }
    }

    function showPause(button) {
        var player = button.querySelector("audio");
        var pause = button.querySelector(".pause");
        var speaker = button.querySelector(".speaker");
        player.isPlaying = function () {
            return player.paused === false;
        };
        if (player.isPlaying()) {
            hide(speaker);
            show(pause);
        }
    }

    function showSpeaker(button) {
        var player = button.querySelector("audio");
        var pause = button.querySelector(".pause");
        var speaker = button.querySelector(".speaker");
        player.isPlaying = function () {
            return player.paused === false;
        };
        if (player.isPlaying()) {
            hide(pause);
            show(speaker);
        }
    }

    function playButtonClickHandler(evt) {
        var button = getPlayButton(evt.target);
        playButton(button);
    }

    function playButtonMouseoverHandler(evt) {
        var button = getPlayButton(evt.target);
        showPause(button);
    }

    function playButtonMouseoutHandler(evt) {
        var button = getPlayButton(evt.target);
        showSpeaker(button);
    }
    var playButtons = document.querySelectorAll(".playButton");
    playButtons.forEach(function (button) {
        button.addEventListener("click", playButtonClickHandler);
        button.addEventListener("mouseover", playButtonMouseoverHandler);
        button.addEventListener("mouseout", playButtonMouseoutHandler);
    });
}());

Undeclared ‘document’.
var playButtons = document.querySelectorAll(".playButton3");

(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hide3");
    }

    function hide(el) {
        el.classList.add("hide3");
    }

    function playButton(button) {
        var player = button.querySelector("audio");
        var play = button.querySelector(".play3");
        var pause = button.querySelector(".pause3");
        button.classList.add("clicked");
        player.volume = 1.0;
        if (player.paused) {
            hide(play);
            show(pause);
            player.play();
        } else {
            show(play);
            hide(pause);
            player.pause();
        }
    }

    function getPlayButton(el) {
        while (el.classList.contains("playButton3") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function playButtonClickHandler(evt) {
        var button = getPlayButton(evt.target);
        playButton(button);
    }
    var playButtons = document.querySelectorAll(".playButton3");
    playButtons.forEach(function (button) {
        button.addEventListener("click", playButtonClickHandler);
    });
}());
2

a browser

Keep forgetting to checkmark

3

If you don’t want to worry about forgetting the checkmark, you can instead place the following JSLint directive at the top of the JavaScript code:

/*jslint browser */

There’s further details about the jslint directive at the JSLint help page.

2 Likes
4

But then I’ll forget to delete this:
/*jslint browser */

I’ll just come back here every time I see that and see my post as a reminder.

5

There’s no problem with that. It’s a comment and will be ignored when the code is run.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.