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


#228

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.


#229

I just changed that.
https://jsfiddle.net/psktv8hf/

Step 2:


#230

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


#231

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


#232

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

#233

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


#234

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


#235

What is the link for the current code?


#236

https://jsfiddle.net/psktv8hf/


#237

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


#238

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.


#239

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


#240

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.


#241

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

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


#242

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

#243

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.


#244

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;

#245

What do you mean by the 1st one?


#246

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.


#247

I don't understand what you mean.