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


#477

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

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

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


   function togglePlayButton() {
     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) {
       playButton.querySelector(".play").style.display = "none";
       playButton.querySelector(".pause").style.display = "inline-block";
       player.play();
     } else {
       playButton.querySelector(".play").style.display = "inline-block";
       playButton.querySelector(".pause").style.display = "none";
       player.pause();
     }
   }

#478

https://jsfiddle.net/02me2fvk/92/

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

   }

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

#479

When you post code like that without any context to it, it's impossible to figure out why you are posting that code, or what changes have occurred to it.

It's a waste of everybody's time for you to post like that.

Adding comments so that your post can be understood, really is a vital part of the process.


#480

I copied from here:
https://jsfiddle.net/q76sf3f2/45/


#481

For what purpose? To gain a gold star because the code looks good?


#482

ReferenceError: upTo is not defined
[Learn More]
show:117:1


#483

Then define it. You have plenty of other code examples that use that function, from which to obtain it from.


#484

SyntaxError: missing ) in parenthetical

var playButton = document.querySelector(".playButton");


#485

Now what?
https://jsfiddle.net/02me2fvk/97/


#486

It looks like you have a problem with having one more extra closing brace than is required.


#487

ReferenceError: evt is not defined
[Learn More]
_display:172:8


#488

ReferenceError: linksClickHandler is not defined
[Learn More]
_display:174:1


#489

What part did I mess up on?
https://jsfiddle.net/8qh0huka/5/

How come:

  .hide {
    display: none;
  }

Isn't working?


#490

Use of getAttributeNode() is deprecated. Use getAttribute() instead.
_dist-editor.js:2:27387
ReferenceError: button is not defined
[Learn More]
show:129:11
ReferenceError: button is not defined
[Learn More]
show:142:11
ReferenceError: button is not defined
[Learn More]
show:129:11
ReferenceError: button is not defined
[Learn More]
show:142:11
ReferenceError: button is not defined
[Learn More]
show:129:11
ReferenceError: button is not defined
[Learn More]
show:142


#491

What does this mean I need to do?


#492

I don't understand what I messed up on.


#493

Converting .style to classList

There might be a pattern in where I'm going so terribly wrong with these.
But I can't figure it out.

Now look at this one:
https://jsfiddle.net/8qh0huka/6/

Where did I go so wrong with this?
https://jsfiddle.net/8qh0huka/5/

This is better, but still not working.
https://jsfiddle.net/uytjxzzt/5/

Working .style version:
https://jsfiddle.net/1ybhqbw0/


#494

This is where I know I need to take a break.
https://jsfiddle.net/8qh0huka/8/

class="play hide"

not 'none'

What else am I messing up on in here?


#495

Almost.

How do I hide the pause button after you click on it?

I don't think this new thing has ever been addressed.

This is in the process of converting .style to classList
https://jsfiddle.net/8qh0huka/14/

Working .style version:
https://jsfiddle.net/1ybhqbw0/


#496

When it's paused and the pause button shouldn't be showing, use the browser console to inspect that pause button.

Do you see anything strange in the inspected HTML code?