Difference between 2 Javascript codes


#86

Next

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

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

   var playButtons = document.querySelectorAll(".playButton"); {
     el.playButtonClickHandler("click", playButton);

   });
   }());

#87

Stuck

I don't understand this part.

Then, in the click handler, get the button from the event target evt.target and execute the togglePlayButton function using that button.

   function playButtonClickHandler(evt) {
     ...
   }

#88

It's been done in many other parts of your code. For example, in post #62 from code that you pasted.


#89

Here:
https://jsfiddle.net/0pfe6fkf/20/

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

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

   var playButtons = document.querySelectorAll(".playButton"); {
     el.playButtonClickHandler("click", playButton);

   });
   }());

#90

That's not going to work inside of the querySelectorAll part. The element doesn't have any method on it called playButtonClickHandler.

What it does have, and what you need to use, is the addEventListener method, replacing playButton on that same line with the click handler function name instead.


#91

https://jsfiddle.net/0pfe6fkf/22/

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

  }());

#92

  var playButtons = document.querySelectorAll(".playButton"); {
     el.addEventListener ("click", playButton);

#93

WTF? :eek:


#94

I copied it off of here:
https://jsfiddle.net/vcst36sf/19/

But it's not working.
https://jsfiddle.net/0pfe6fkf/22/


#95

It's missing:

playButtons.forEach


#96

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

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

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

  }());

#97

Where do I place that?


#98

First you need to replace the var playButton with var playButtons, using querySelectorAll to get all of the play buttons.
Then you can use forEach to wrap around the addEventListener line.


#99

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

#100

https://jsfiddle.net/0pfe6fkf/23/

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

   var playButtons = document.querySelectorAll(".playButton");
   playButtons.forEach(function addPlayButtonHandler(el) {
     el.addEventListener("click", playButton);

#101

What now?

I'm stuck:
https://jsfiddle.net/0pfe6fkf/23/


#102

Please remind me of the goal that we are working towards?


#103

playButtons.forEach


#104

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

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

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

#105

This....