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


#376

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


#377

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


#378

How come it's not going from play to pause, back to speaker?
https://jsfiddle.net/whdaje44/4/

Like it does here?
https://jsfiddle.net/d5uzv24x/1/


#379

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


#380

Is every answer in the console?


#381

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]


#382

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


#383

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

#384

Do I add this too?

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

#385

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


#386

That worked:
https://jsfiddle.net/whdaje44/7/


#387

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

#388

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.


#389

Really?

I noticed that.

How does that get addressed?


#390

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.


#391

Would I be combining show speaker with show pause?


#392

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.


#393

So, I shouldn't do this then?


#394

It's okay to leave it as it is.


#395

You mean, as is, like this:
https://jsfiddle.net/whdaje44/8/