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


#638

How do I write it?


#639

You already have a partly working example on the following line:

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

where "links" needs to be changed from an element selector to a class selector, by adding a fullstop in front of the word.

The bad line that you need to fix is:

var button = upTo(evt.target);

where you need to add a second argument which which is the selector that you are looking for. In this case, it's the "playButton" selector.


#640

var playButton = upTo(evt.target);


#641

No, not at all.


#642

what needs to be changed?


#643

With the var button line, it currently has one argument, which is evt.target

It needs a second argument, like with the upTo links line, where the var button second argument needs to be the classname of what you are looking for, that being ".playButton" in this case.


#644

var button = upTo(evt.target, ".playButton")


#645

That's looking correct.


#646

https://jsfiddle.net/cubphcqd/15/


#647

It is in the click handler where that line needs to go.


#648

https://jsfiddle.net/cubphcqd/19/


#649

It replaces the line that's similar to it in the click handler.


#650

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

#651

Do you need me to explain to you what the word "replace" means?


#652

it's terrible to copy and paste inside jsfiddle.

It keeps parsing everything.


#653

https://jsfiddle.net/cubphcqd/23/

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

#654

Let's now get the upTo function working properly.

Currently it uses className, which is quite limiting. Replace className with selector and replace the classList.contains with matches instead.


#655

   function upTo(el, selector) {
     while (el.matches(selector) === false) {
       el = el.parentNode;
     }
     return el;
   }

#656

The "links" still needs to be updated to be ".links"


#657

https://jsfiddle.net/cubphcqd/26/