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

How do I write it?

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.

var playButton = upTo(evt.target);

No, not at all.

what needs to be changed?

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.

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

That’s looking correct.

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

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

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

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

it’s terrible to copy and paste inside jsfiddle.

It keeps parsing everything.

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

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.

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

The “links” still needs to be updated to be “.links”