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


#497

Web console says this:


#498

I see nothing weird about the pause in the html section. Everything looks normal to me.

Nothing looks out of the ordinary.

play hide
speaker hide
pause hide

.initial,
  .pause,
  .play,
  .speaker {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }

  .pause,
  .play {
    stroke: #e77d19;
    stroke-width: 3px;
    fill: transparent;
  }

  <svg class="pause hide" width="90" height="108" viewbox="-13 -10 85 120">
    <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>

#499

The inline style setting display to inline-block certainly looks strange to me. That shouldn't be there.


#500

I don't see inline-block in inline anywhere in the html.
https://jsfiddle.net/8qh0huka/16/

I don't see block anywhere in the html section either.
https://jsfiddle.net/8qh0huka/16/

I used Find: and and those 2 were not found.

inline or block.


#501

Do you mean in the javascript?


#502

In here?

    };
     if (player.isPlaying()) {
       playButton.querySelector(".speaker").style.display = "none";
       playButton.querySelector(".pause").style.display = "inline-block";
     }
   }

#503

When the pause button is not supposed to be showing, right-click on the pause button and inspect the code. You should be taken to the debugger's view of the HTML code.

Find the pause button in that debugger view, and you should see that it has a class of "pause hide" along with an inline style of display:inline-block

That there is your problem. The class name is attempting to hide the pause button, but the inline style is overriding things. You need to remove those inline display commands, and use hide/show on the class name instead.


#504

I already have that set up:

I didn't switch to it cause it wasn't working.

    function playButtonMouseoverHandler() {
      var player = button.querySelector("audio");
      var speaker = button.querySelector(".speaker");
      var pause = button.querySelector(".pause");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(speaker);
        show(pause);
      }
    }

    function playButtonMouseoutHandler() {
      var player = button.querySelector("audio");
      var pause = button.querySelector(".pause");
      var speaker = button.querySelector(".speaker");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(pause);
        show(speaker);
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

#505

See:
https://jsfiddle.net/8qh0huka/17/

Speaker doesn't show,

pause mouse over isn't working.

Console says: Which I don't understand.
ReferenceError: button is not defined
[Learn More]
show:127:11
ReferenceError: button is not defined
[Learn More]
show:140:11

     }
   }

    function playButtonMouseoverHandler() {
      var player = button.querySelector("audio");
      var speaker = button.querySelector(".speaker");
      var pause = button.querySelector(".pause");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(speaker);
        show(pause);
      }
    }

    function playButtonMouseoutHandler() {
      var player = button.querySelector("audio");
      var pause = button.querySelector(".pause");
      var speaker = button.querySelector(".speaker");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(pause);
        show(speaker);
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

#506

Would that mean I'm missing 2 var statements?
https://jsfiddle.net/8qh0huka/17/

ReferenceError: button is not defined
[Learn More]
show:127:11
ReferenceError: button is not defined
[Learn More]
show:140:11


#507

I did it.............
https://jsfiddle.net/8qh0huka/20/


#508

Would you recommend using a short syntax here?

And is that possible?

It's not a function though, so probably not.

       var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

#509

You showed me how to do this one.

    function addPlaying(el) {
      el.classList.add("playing");
    }

    function removePlaying(el) {
      el.classList.remove("playing");
    }

addPlaying(button);
removePlaying(button);

#510

I fixed the curly brace problem:
https://jsfiddle.net/02me2fvk/100/

Now this:
ReferenceError: evt is not defined

It is defined though:

 var wrap = upTo(button, "wrap");

#511

Can I successfully work off of this?
https://jsfiddle.net/02me2fvk/101/

Or will it be too difficult for me?

Going through web console, will that fix all of this?
Whatever needs to be fixed?

 (function iife() {
   "use strict";
   document.querySelector(".myLink").classList.add("hide");

   function show(el) {
     el.classList.remove("hide");
   }

   function hide(el) {
     el.classList.add("hide");
   }

   function togglePlayButton(button) {
     var wrap = upTo(button, "wrap");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     show(wrap.querySelector(".myLink"));
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

     function playButtonClickHandler() {
       var button = this;
       togglePlayButton(button);
     }


     function linksClickHandler() {
       var button = document.querySelector(".playButton");
       document.querySelector(".myLink").classList.remove("hide");
       button.querySelector(".initial").style.display = "none";
       playButton.addEventListener("click", playButtonClickHandler);
       playButton.querySelector(".play").style.display = "inline-block";
       playButton.querySelector(".pause").style.display = "none";
       button.classList.add("playing");
     }
   }

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

   var playButton = document.querySelector(".playButton");
   document.querySelector(".myLink").classList.add("hide");
   playButton.addEventListener("click", linksClickHandler);


 }());

#512

I'm waiting to get your input on what I should do here.

Can I successfully work off of this?
Going through web console
https://jsfiddle.net/02me2fvk/101/

Or do I need to start back from the last working version?
https://jsfiddle.net/02me2fvk/102/


#513

I have one quick question about this code.
https://jsfiddle.net/q76sf3f2/40/

If I remove:
var button = upTo(evt.target, "playButton");

from here:

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

The code still works:
https://jsfiddle.net/q76sf3f2/48/

Can I delete this line, or do I need it?
var button = upTo(evt.target, "playButton");


#514

So, the end result would look like this
https://jsfiddle.net/q76sf3f2/49/

 }

   }

   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 playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", playButtonClickHandler);

 }());

#515

Nope, that addEventListener code is nicely telling you that three different events are being handled by three different functions. That code is doing a good job there.


#516

The `var button' line that is causing the problem would have originally been inside of an event handler, but the existing event handler isn't missing any code, so you can get rid of that line.