Two versions of a playButton Binding Audio With a grid link structure

It’s wrong because neither play nor speaker are functions.
It is hide and show that are functions instead.

I shouldn’t be working on code when I’m tired.

How come it’s not going from play to pause, back to speaker?

Like it does here?

Allow me to direct you back to the browser console for your answer.

Is every answer in the console?

ReferenceError: pause is not defined
[Learn More]
show:217:7
ReferenceError: speaker is not defined
[Learn More]
show:205:7
ReferenceError: pause is not defined
[Learn More]

It’s the best first place to look when you have troubles.

1 Like

How are they not defined?



      hide(pause);
      show(speaker);

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

Do I add this too?

   var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");

There is no var statement in that function that retrieves a reference to the play or pause element.

That worked:

Like this?

  function showPause(event) {
    var button = getButton(event.target);
    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);

You’ll notice that there is some duplication building up in the code now.

When things are adjusted to use a separate handler, some of that duplication can then be removed.

Really?

I noticed that.

How does that get addressed?

You might also notice that when you are tired, that you make really dumb and stupid mistakes.

That happens to us all, and the best thing to do is to take a break, get some rest, and come back to it fresh the next day.

3 Likes

Would I be combining show speaker with show pause?

No, you would instead be creating new functions to get the pause and speaker elements.

They are just temporary functions though because they lead to a better solution.

function getPause(button) {
    return button.querySelector(".pause");
}
function getSpeaker(button) {
    button.querySelector(".speaker");
}

You can then use:

var pause = getPause(button);
var speaker = getSpeaker(button);

And then when the code is moved out of the event handler function in to its own separate function with button being passed to it, that code will still work.

Then, the getPause and getSpeaker functions can both be combined together, because the selector is the only thing that’s different about them.

function getEl(button, selector) {
    return button.querySelector(selector);
}
...
var pause = getEl(button, ".pause");
var speaker = getEl(button, ".speaker");

But then, you might as well avoid using the function completely and use querySelector instead, without needing the functions at all.

var pause = button.querySelector(".pause");
var speaker = button.querySelector(".speaker");

So while it’s possible to attempt to improve things by moving code out to separate functions, when it comes to the simple stuff we’ve learned that sometimes there’s no benefit gained by doing so.

So, I shouldn’t do this then?

It’s okay to leave it as it is.

You mean, as is, like this: