Conditional Matches

JavaScript
1

I want to see how each of these are used on the below code.

I realized you don’t just place one in place of another, each one is set up differently.

    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
    }

    while (!el.classList.matches(selector)) {
    }

This one is done.
    while (el.classList.matches(selector) === false) {
    }

    while (noMatch(el, selector)) {
    }

    while (!hasMatch(el, selector)) {
    }

On this code:


  (function iife() {
    "use strict";

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

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

    function togglePlayButton(button) {
      var player = button.querySelector("audio");
      var play = button.querySelector(".play");
      var pause = button.querySelector(".pause");
      player.volume = 1.0;
      if (player.paused) {
        hide(play);
        show(pause);
        player.play();
        button.classList.add("active");
      } else {
        button.classList.remove("active");
        show(play);
        hide(pause);
        player.pause();
      }

    }

    function getPlayButton(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function playButtonClickHandler(evt) {
      var button = getPlayButton(evt.target);
      togglePlayButton(button);
    }

    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);

  }());
2

I tried doing one of them. no luck.


function getPlayButton(el) {
      while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
      }
      return el;
    }


   var button = document.querySelector(".playButton");
      playButton.(function togglePlayButton(button)(el) {
        el.addEventListener("click", .playButton);
3

The browser console tells you why it doesn’t work.

4

SyntaxError: missing name after . operator

What does operator mean?

playButton.(function togglePlayButton(button)(el) {

5

It’s a “member operator”, in this case “dot notation”

In other words, the script is expecting something that belongs to “playButton” after the period.

1 Like
6

What comes after the dot?
playButton.


playButton.(function togglePlayButton(button)(el) {
7

It looks like you’ve messed up that part of the code to get multiple playButtons and assign to each of them an event handler.

You have other similar code that you can use to learn how the code should look there.

8 
function getPlayButton(el) {
      while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
      }
      return el;
    }

This doesn’t work on single audio players, only multiple?

or does only this part need to be changed?

   var button = document.querySelector(".playButton");
      playButton.(function togglePlayButton(button)(el) {
        el.addEventListener("click", .playButton);
9

You will see what that event handler code is supposed to be, in the code at https://jsfiddle.net/j2g8e7k6/28/

10

missing name after . operator

playButton.(function togglePlayButton(button)(el) {

  function togglePlayButton(button) {
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    player.volume = 1.0;
    if (player.paused) {
      hide(play);
      show(pause);
      player.play();
      button.classList.add("active");
    } else {
      button.classList.remove("active");
      show(play);
      hide(pause);
      player.pause();
    }

  }

  function getPlayButton(el) {
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
      el = el.parentNode;
    }
    return el;
  }


  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
  }

  var button = document.querySelector(".playButton");
  playButton.(function togglePlayButton(button)(el) {
    el.addEventListener("click", .playButton);
  });
}());
11

Are you wanting to use the same technique that is used for multiple play buttons, on the single play button here?

12

It’s a single audio player, so single would make sense here, right?

13

We’ll get it working using both then.

So I can see the difference.

14

I’m getting these confused.

  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
  }

  var button = document.querySelector(".playButton");
  playButton.(function togglePlayButton(button)(el) {
    el.addEventListener("click", .playButtonClickHandler);
15

Let’s start back with this:

  function getPlayButton(el) {
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
      el = el.parentNode;
    }
    return el;
  }


  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
  }

  var button = document.querySelector(".playButton");
  playButton.(function togglePlayButton(button)(el) {
    el.addEventListener("click", .playButton);
  });

}());

16

multiple play buttons uses forEach, single doesn’t use that cause it’s only 1.

17

There is no document here, only button.


  function togglePlayButton(button) {
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
18

I recommend that you replace that with working code from https://jsfiddle.net/j2g8e7k6/28/

Here’s that code:

    var playButton = document.querySelector(".playButton3");
    playButton.addEventListener("click", playButtonClickHandler);

You only have to change .playButton3 to .playButton to get that working.

19

What’s next?

SyntaxError: missing ; before statement

20

Line 45 shouldn’t be there, remove that.

1 Like