Difference between 2 Javascript codes

Is this what you’re referring to?

If it’s not related to this, then I can ignore this, and we can move on.

SyntaxError: missing ; before statement
[Learn More]
show:154:3

});
}());

It’s pointing to this one to be exact

}());

Consistent indentation of code can help. If you run the code through the “beautifier” linter does it help?

1 Like

That’s telling you that there isn’t an opening brace to match the highlighted closing brace.

Look at the top of the code, and you will see that somehow you have removed the first line that defines the IIFE function. Put it back.

: playButtonMouseoverHandler is not defined
[Learn More]
_display:154:3

I recommend that we use JSLint to help us drive problems out of the code, before working further with the code.

1 Like

But they are being used, that doesn’t make sense.

Unused 'showPause'.
   function showPause(button) {

Unused 'showSpeaker'.
   function showSpeaker(button) {

Undeclared 'playButtonMouseoutHandler'.
     button.addEventListener("mouseout", playButtonMouseoutHandler);

You’re right, that doesn’t make any sense. It will be due to messing up the opening and closing braces for the functions.

The easy solution to this is to get JSLint on to the case, to find all of the problems so that we can easily fix them.

Another benefit of using JSLint is that there’s less danger of feeling that someone is picking on you. It tells you that your code has problems and will keep on telling you until you fix those problems. It doesn’t try to hurt your feelings, but it doesn’t try to protect them either.

Get your code fixed up and further progress from there will be much easier.

JSLint is known to make grown men cry, but it took me only a few minutes to use it to find and fix all of the problems in similar code of yours in another recent thread. Well be here to help you through with that too.

Expected ';' and instead saw 'if'.
        }

37.9
Expected ‘;’ and instead saw ‘if’.

You left out a semicolon from the previous line. Put it where it belongs.

That’s not just a semicolon that is missing. The var lines are incomplete!

(function iife() {
    "use strict";

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

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

    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(play);
        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 getPlayButton(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

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

Is JSLint happy with that code?

Unused ‘showPause’.
function showPause(button) {
44.13
Unused ‘showSpeaker’.
function showSpeaker(button) {
71.45
Undeclared ‘playButtonMouseoverHandler’.
button.addEventListener(“mouseover”, playButtonMouseoverHandler);
72.44
Undeclared ‘playButtonMouseoutHandler’.
button.addEventListener(“mouseout”, playButtonMouseoutHandler);

showPause and showSpeaker would be used when you mouseover and mouseout of the button, so handler functions for those events need to be created.

And those other two errors, are attempting to use handler functions that currently don’t exist. Those are the ones that the previous sentence was saying need to be created.

Eash handler should be as easy as creating a button variable, and then passing that button to the showPause or showSpeaker function.

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

    function playButtonMouseoutHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      var pause = button.querySelector(".pause");
      var speaker = button.querySelector(".speaker");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(pause);
        show(speaker);
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);

No that’s wrong, because it’s already being done by the showPause and showSpeaker functions. Just do what I said.

You only need two simple handler functions, with no more than two lines of code in each function, that passes the button over to the showPause and showSpeaker functions.

I was putting it in the right order.

(function iife() {
    "use strict";

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

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

    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(play);
        hide(speaker);
        if (player.paused) {
            hide(play);
            show(pause);
            player.play();
        } else {
            show(play);
            hide(pause);
            player.pause();
        }
    }

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

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


    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);
        }
    }

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