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


#207

Now you've done the opposite of what's been asked of you.


#208

function togglePlayButton(button) {
      document.querySelector(".myLink").classList.remove("hide");
      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;

#209

And don't forget to remove from the togglePlayButton function the code that's in the updated handler function.

That would be the var button line that you need to remove from the togglePlayButton function.


#210

function togglePlayButton(button) {
      document.querySelector(".myLink").classList.remove("hide");
      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;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());


}

function getPlayButton(el) {
    while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
    }
    return el;
}
...
function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
}

function upTo(el, className) {
    while (el.classList.contains(className) === false) {
        el = el.parentNode;
    }
    return el;
}
...
var button = upTo(evt.target, "playButton");

#211

You've forgotten to show the rest of the function.

If you do paste only part of a function, it's important to use the ... ellipses to indicate that there's more that you've left out, for the sake of brevity.

For example:

function togglePlayButton(button) {
      document.querySelector(".myLink").classList.remove("hide");
      var player = button.querySelector("audio");
      ...
}

The reason why you use the ... ellipses is to inform everyone that yes, there is more code that is supposed to be there, but you're not showing it because it's not relevant to what's being discussed.


#213

function togglePlayButton(button) {
      document.querySelector(".myLink").classList.remove("hide");
      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;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        player.pause();
      }
    }

#214

Not quite.

The getPlayButton function was supposed to be replaced by the upTo function, so the getPlayButton function needs to be removed.


#215

function getPlayButton(el) {
    while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
    }
    return el;
}
...
function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
}

function upTo(el, className) {
    while (el.classList.contains(className) === false) {
        el = el.parentNode;
    }
    return el;
}
...
var button = upTo(evt.target, "playButton");

#216

I'm confused.

I have all the code right in front of me.


#217

Oh, you edited your reply so that it's totally different from what you had there. Minor edits are okay, but completely replacing everything that you said only leads to major confusion.


#218

function togglePlayButton(button) {
      document.querySelector(".myLink").classList.remove("hide");
      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;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        player.pause();

function getPlayButton(el) {
    while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
    }
    return el;
}
...
function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
}

function upTo(el, className) {
    while (el.classList.contains(className) === false) {
        el = el.parentNode;
    }
    return el;
}
...
var button = upTo(evt.target, "playButton");

#219

Going by the instructions, first you add a getPlayButton function to make it easier to get the button.
Then, that getPlayButton is made more generic, so that instead of getting just the "playButton" element, that string is passed in to the function as a variable called className.

Because the getPlayButton function is now used for more than only the play button, the function gets renamed to be upTo instead, which is a standard generic name for when the function lets you go up the DOM to find an element that you need.

jQuery for example uses a similar function called parentsUntil that does a similar job, but we are using upTo for the function name here.


#220

What line am I up to in the instructions?


#221

I think that blindly going through the instructions is not going to be helpful, because it's hard to tell if the code continues to work after making any changes.

Let's get the existing code working first, and then move on to making further improvements from there.
That way we can test the code as we go to ensure that it still continues to work after making each improvement.

What is a link to the code that you are currently working on, so that we can first make it work, and then do improvements to it.


#222

Last working version:
https://jsfiddle.net/qa8srLoe/


#223

I haven't put any of the changes into the code yet cause it's noting going to work.

All of the changes I've made have been done only on here.


#224

Okay, start making the improvements from the post #174 starting with creating the togglePlayButton function and moving most of the code from the handler in to that new function.


#225

Like this?
https://jsfiddle.net/2amdL4os/5/


#226

No not like that. You've gone too far too fast, when things broke several steps beforehand.

Undo the changes that you did, until you get back to code that works.


#227

Here:
https://jsfiddle.net/qa8srLoe/

Step one would be?