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

That would be the Line 1 instructions from post #174

Yes, we’re going to keep going back to that until you get it right.

I just changed that.

Step 2:

No not step 2 yet. You’re missing the event handler from that code.

I now have to leave, but will return in a few hours.

The end result will go from this:

  if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        player.pause();

to this:

    if (player.paused) {
        hide(play);
        show(pause);
        player.play();
      } else {
        show(play);
        hide(pause);
        player.pause();
      }

How is the code going? Is it still in a working state.

I didn’t touch anything. I was converting my other audio players from style to classList.

What is the link for the current code?

last thing i did was change it to this:
function togglePlayButton(button) {

It looks like you haven’t yet completed the instructions relating to Line 1, with that code.

Do you have more recent code? Or do you want to continue on from the link that you just gave.

continue from the link going step by step. So I don’t make any missteps.

It looks like you renamed the playButtonClickHandler function to be togglePlayButton instead.

Below the togglePlayButton you need to create a playButtonClickHandler function, so that the handler can then execute the function.

Aside:
Execute? Invoke? Run? Call? The terminology for functions is that you execute a function.

It looks like you renamed the playButtonClickHandler function to be togglePlayButton instead.

You said to do that in your instructions, didn’t you?

Line 1


function playButtonClickHandler() {
    ...
}

Handler functions aren't supposed to contain much code. Instead, they handle the incoming event and pass on information to where it's needed.

function togglePlayButton(button) {
    // the remaining code in the handler is moved to here
}
function playButtonClickHandler(evt) {
    var button = document.querySelector(".playButton");
    togglePlayButton(button);
}

No I did not say that.

The comment in the togglePlayButton function said “the remaining code in the handler is moved to here” which is quite different indeed.

Then what goes in the 1st one?

What do I take out fron the 2nd one and place in the first one?

function playButtonClickHandler() {
    ...
}

      function togglePlayButton(button) {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      var play = button.querySelector(".play").classList.add("hide");
      var pause = button.querySelector(".pause").classList.add("hide");
      playButton.querySelector(".initial").classList.add("hide");
      player.volume = 1.0;

What do you mean by the 1st one?

If you mean to ask about what goes in the togglePlayButton function, then here is what goes in there.
All of the code that was in the handler function gets moved over to the togglePlayButton function, except for the code that the updated handler is using.

I don’t understand what you mean.