Difference between 2 Javascript codes


#21

That handler is all good for now. But it's best if functions have only a single responsibility. Each function should have one and only one reason for change. The handler for example, only had to worry about passing on the button from the event.

It's like in business. When you have a person that has multiple masters, that person ends up in trouble because he cannot keep both of them happy at the same time.

Here's some good info about the Single Responsibility Principle and Separation of Concerns.


#22

It originally looked like this:
https://jsfiddle.net/vcst36sf/6/

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

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

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

    function upTo(el, className) {
      while (el.classList.contains(className) === false) {
        el = el.parentNode;
      }
      return el;
    }
    var button = upTo(evt.target, "playButton");
  }());

I removed this piece of code from it:

    function upTo(el, className) {
      while (el.classList.contains(className) === false) {
        el = el.parentNode;
      }
      return el;
    }
    var button = upTo(evt.target, "playButton");

#23

Can these 2 be combined? That's what I was just thinking.

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



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

#24

I want to fix this one so it does that.

But it's best if functions have only a single responsibility.


#25

That wouldn't be a good idea.

What makes you think that it would be a good idea to combine the two?


#26

I have no idea.

But what would work, to do what you said?


#27

/me ponders

Yes, yes that would work :biggrin:


#28

It should be able to work like this.
https://jsfiddle.net/vcst36sf/10/

    function getPlayButton(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }
    
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);

#29

That would work with a single player. It takes only a simple change for it to work with any number of players.


#30

What would the change be?


#31

Multiplayer uses this:

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

Single player would use: ???

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

#32

The following code using querySelector only ever gets the first play button

var playButton = document.querySelector(".playButton");

The following code using querySelectorAll gets all of the play buttons

var playButtons = document.querySelectorAll(".playButton");

When you have all of the play buttons, you can then loop through them using the forEach method.

playButtons.forEach(function (playButton) {
    playButton.addEventListener("click", playButtonClickHandler);
});

But beware, for removing the playButton variable will have an impact on some of your code, as we discussed earlier and fixed too. When code wrongly uses the playButton as a side-effect, that is a separate issue that is easy to fix.


#33

What about for this?

Single player would use: ???

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

#34

What else gets added?

To this?

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

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

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


  }());

#35

Yes, that would be correctly used for a single player.


#36

It's not working on a single player though.
https://jsfiddle.net/vcst36sf/11/

Did I do something wrong in the way I set it up?


#37

Go back to the browser console. What does it tell you?


#38

ReferenceError: playButtonClickHandler is not defined
[Learn More]


#39

It looks like you accidentally deleted that function, when it is needed.


#40

I change

playButtonClickHandler

to what