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


#105

I changed it to audio, so that's correct then.


#106

What else needs to be adjusted in here?

 document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("audio");
      playButton.querySelector(".initial").classList.add("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.add("hide");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("hide");
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#107

.myLink Should only be once or twice?

or should it be set up differently?

document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");

#108

This what I have so far.
https://jsfiddle.net/35bw1c0d/1/


#109

Before moving on to other adjustments, first test that things still continue to work.


#110

The playbutton doesn't appear now.
it's hidden.
https://jsfiddle.net/35bw1c0d/1/


#111

The audio change is not relevant to that problem. You have been failing to check that things work after making changes, which has resulted in your current failure.

Which one do you want to work on first? The play button, or the audio?


#112

The part the needs to be adjusted in here.

 document.querySelector(".myLink").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = playButton.querySelector("audio");
      playButton.querySelector(".initial").classList.add("hide");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        playButton.querySelector(".play").classList.add("hide");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("hide");
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

#113

You haven't answered my question.

Which problem do you want to work on first? Do you want to first fix the play button, or fix the audio?


#114

play button

Which ever should be worked on first, before you get to the other.


#115

The order of which one gets worked on first doesn't matter. They should be worked on one at a time though.


#116

play button

then audio.


#117

Okay, the play button.

Look at the HTML code. Can you find where the play button is in the HTML code?


#118

<div class="playButton">


#119

That's not the part that shows the play symbol. Do you have one of those? Or, possibly a more effective question, do you have another working example of the code that shows the play button?


#120

    <svg class="play hide" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

#121

It goes straight to the pause button cause it's hidden on initial.

Here:
https://jsfiddle.net/7ourwfrg/


#122

Okay then. So the pause button needs to be the focus of our investigation, instead of the play button.

In the non-working code, what is the HTML for the pause button?


#123

    <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

#124

Since you said that the pause button should be showing, can you see why the pause button isn't showing?