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


#577

I mentioned that before.


#578

https://jsfiddle.net/nt2sL2e3/14/


#579

No, the playbutton click handler function.


#580

        function upTo(evt.target, ".playButton") {
     var button = getPlayButton(evt.target);
     togglePlayButton(button);
   }

#581

You said to remove this:
getPlayButton


#582

That's right, yes I did. And to use the upTo function in its place.


#583

https://jsfiddle.net/nt2sL2e3/16/


#584

show(wrap.querySelector(".myLink"));

will become:??????

  show(links.querySelector(".links"));

#585

That all depends on what myLink was. Is it the same as what .links now is?


#586

myLink
https://jsfiddle.net/q76sf3f2/40/

Links:
https://jsfiddle.net/nt2sL2e3/17/

Links:.style working version:
https://jsfiddle.net/Lgrnraho/18/


#587

So is .myLink the same as what .links is now used for?


#588

I would say, yes it is.


#589

https://jsfiddle.net/nt2sL2e3/21/

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

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

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



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

     }

#590

This is invalid, I can't use upTo for this since there's nowhere to go up to.

There's only links.

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

or am I wrong?


#591

Why is it invalid? The button is inside of the links element, so starting from the button it's easy to find the links element. It has a classname of "links", so the ".links" will find that element.

var links = upTo(button, ".links");

If instead of ".links" to find a class name, you used a selector of "links" without the fullstop, that would try and look for a <links> element instead which is clearly not desired.


#592

What do I do next?
https://jsfiddle.net/nt2sL2e3/31/

Links:.style working version:
https://jsfiddle.net/Lgrnraho/18/


#593

Check the browser console.

Yes, I keep throwing you back to that because it's so damned useful.


#594

upTo(evt.target, ".playButton") {

SyntaxError: missing ; before statement
[Learn


#595

It looks like you removed the word function from that line when you shouldn't have.


#596

SyntaxError: missing ) after formal parameters
_display:132:22

it will not show me where the line is.

keeps saying:
{"error": "Please use POST request"}