Understanding the last function and how it works


#1

I think this thread will help not just me better to understand how the last function works, but also other people too. If I’m ever going to learn how to do this I need to learn it from scratch.

Let’s Begin.

How do we know what goes where?

Using this javascript as an example:
Of what we’re going to try and attach the last function to.
https://jsfiddle.net/bwa3os2v/242/

What we’re doing is figuring out which goes in what spot, and why it does.
In all the “text here” spots.

The two, or three variables we’ll be working with are playButton, button, and wrapper, but that’s depending upon what the structure of the code would look like. In the 1st, two variables are used, the 2nd three are used. Or the code structure might look different from those, not sure.

But first, we need to figure out which structure of the code we’re going to start with.

I want to use the “initButton” for this, and I know there are different ways of setting it up. I listed a few ways below that I think will work with the code I have here. If there are other ways I did not list in my examples, you can provide yours also.
https://jsfiddle.net/bwa3os2v/242/

Being that there is more than one way, I would like to make one of each then decide which one I would want to use with this. The reason for this is so I have examples of how it’s done different ways, also so I have something I can look back to.

1.)

function initButton(selector) {
        var 1.) text here = document.querySelector(selector);
        var 2.) text here = 3.) text here.querySelector(".playButton");
        4.) text here.addEventListener("click",playButtonClickHandler );
    }
    initButton(".wrapf");
}());

2.)

  function initButton(selector) {
    var 1.) text here = document.querySelector(selector);
    var 2.) text here = document.querySelector(".wrapf");
    var 3.) text here = 4.) text here.querySelector(".playButton");
    5.) text here.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapf");
}())

3.)

  function initButton() {
    1.) text here  = document.querySelector(".playButton");
    2.) text here.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapf");
}())

In determining what goes where this can be challenging because there are different combinations that would work here which makes the process hard if you don’t know which variable/property should go in what spot as I don’t. And just because a certain combination works, it doesn’t mean it’s the correct one. So, knowing which variable, or property goes into what spot is important.

What are some questions we can think of.

1.) Why would we replace document with a property, what would that mean?

2.) Why might we leave it as document and “not” add a property value there?

3.) Why would we specify one variable over the other and vice versa?

4.) The variables, can they be given any name at all, or do they have to have been used previously in the rest of the above javascript?

5.) Is a selector necessary, what if I removed it from the code. Example 3.) code structure above. Also, what would the benefits of keeping it in be, i.e., what are its intended purposes? With the code I provided .wrapf, it might not have any benefits, but I don’t know.

These are just some of the questions I thought of myself.


#3

I have a question about this code structure:

How come, referring to the classname, (".playButton");, if I put anything in there, it still works. How come the classname isn’t case sensitive, and should it be? If it’s not case sensitive, what use is having that whole line of code in there?

var button = wrapper.querySelector(".playButton");

If you can put any word in there and it still plays? Why is it important to have that line in there?

Here you can see you can put anything in there and it still works, is that how it’s supposed to be, it’s not meant to be case sensitive?
https://jsfiddle.net/bwa3os2v/351/

    function initButton(selector) {
      var wrapper = document.querySelector(selector);
      var button = wrapper.querySelector(".hfdfhdgfdg");
      wrapper.addEventListener("click", playButtonClickHandler);
    }

    initButton(".wrapf");
}());

In saying that, wouldn’t this be a better code to use there? Or would having it set up like this not be a good idea? And if it wouldn’t, why would that be?
https://jsfiddle.net/bwa3os2v/314/

function initButton(selector) {
  var wrapper = document.querySelector(selector);
  wrapper.addEventListener("click", playButtonClickHandler);
}

initButton(".wrapf");

}());


#4

Here’s the function in question.

    function initButton(selector) {
      var wrapper = document.querySelector(selector);
      var button = wrapper.querySelector(".hfdfhdgfdg");
      wrapper.addEventListener("click", playButtonClickHandler);
    }

You have found a part of the code that due to other changes, is no longer used. You can remove that line.

    function initButton(selector) {
      var wrapper = document.querySelector(selector);
      // var button = wrapper.querySelector(".hfdfhdgfdg");
      wrapper.addEventListener("click", playButtonClickHandler);
    }

Removing dead-code is called tree-shaking, and is commonly best achieved by external tools.


#5

Thank you for explaining that to me, I appreciate it.

That’s what happened with this one too.

This line no longer needed to be used either,
which was odd because I thought it would’ve needed to stay in.

playButtons.forEach(function(button) {

When I changed this:

https://jsfiddle.net/bwa3os2v/315/

  var playButtons = document.querySelectorAll(".wrapb");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

to this:
https://jsfiddle.net/bwa3os2v/355/

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", playButtonClickHandler);
    wrapper.addEventListener("mouseover", playButtonMouseoverHandler);
    wrapper.addEventListener("mouseout", playButtonMouseoutHandler);
  }
  initButton(".wrapb");
}());

#6

I made other versions too.

My question is though,
Why is using one with a selector, better than one that doesn’t have one?
Is that a case that’s able to be made?


3.)

This would make it more complicated.
Which there is no need to do.
https://jsfiddle.net/bwa3os2v/310/

  function initButton(selector) {
    var button = document.querySelector(selector);
    var wrapper = document.querySelector(".wrapf");
    var playButton = wrapper.querySelector(".playButton");
    button.addEventListener("click", playButtonClickHandler);
  }

  initButton(".wrapf");
}());

4.) Not a good one.

And this one just has the selector removed:
https://jsfiddle.net/bwa3os2v/305/


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

  initButton(".wrapf");
}());

#7

The last code example gets the first playButton that’s on the page. The problem there is that it cannot work when there are other play buttons above it.


#8

You’re right about that one, that’s not a good one then. Thanks for bringing it to my attention.


#9

Remember this one:

I was able to go from this
https://jsfiddle.net/qm0Lhdo9/1/

 function initialOverlayClickHandler() {
        var wrapper = document.querySelector(".wrape");
        var button = wrapper.querySelector(".playButton");
        hideInitialOverlay(wrapper);
        showPlayButton(button);
        wrapper.removeEventListener("click", initialOverlayClickHandler);
        button.addEventListener("click", playButtonClickHandler);
    }

    function initButton(selector) {
        var wrapper = document.querySelector(selector);
        var button = wrapper.querySelector(".playButton");
        wrapper.classList.add("inactive");
        wrapper.addEventListener("click", initialOverlayClickHandler);
        hideAllButtons(button);
    }
    initButton(".wrape");
}());

To just this:
https://jsfiddle.net/bwa3os2v/361/

    function initButton(selector) {
        var wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrape");
}());

I added a jacket to it which lessened the javascript load on .wrape.

Which I think makes the code more easier to manage.


#10

I just removed these lines from the code, how come they are not needed?
https://jsfiddle.net/s4pqn9jm/15/

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

   function hideInitialOverlay(wrapper) {
        hide(wrapper);
    }

 hideInitialOverlay(wrapper);

Now the code looks like this:
https://jsfiddle.net/s4pqn9jm/10/


(function iife() {
    "use strict";

    function initialOverlayClickHandler() {
        var wrapper = document.querySelector(".jacket");
        wrapper.removeEventListener("click", initialOverlayClickHandler);
    }

    function initButton(selector) {
        var wrapper = document.querySelector(selector);
        wrapper.addEventListener("click", initialOverlayClickHandler);
    }
    initButton(".jacket");
}());
(function iife() {
    "use strict";
    document.querySelector(".jacket").addEventListener("click", function () {
        document.querySelector(".wrap").classList.remove("hide");
    });
}());

#11

Update:

For this specific code:

Can I just use this, and that’s all?

That’s all the required code that’s needed for this?
https://jsfiddle.net/s4pqn9jm/23/

(function iife() {
  "use strict";
  document.querySelector(".jacket").addEventListener("click", function() {
    document.querySelector(".wrap").classList.remove("hide");
  });
}());

Update:

When that’s like that the playbutton overlay falls behind the iframe, out of view:
image


#12

Code goes back to this:
And now I understand why all those other lines were needed.
https://jsfiddle.net/s4pqn9jm/35/

(function iife() {
  "use strict";

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

  function hideInitialOverlay(wrapper) {
    hide(wrapper);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".jacket");
    hideInitialOverlay(wrapper);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".jacket");
}());
(function iife() {
  "use strict";
  document.querySelector(".jacket").addEventListener("click", function() {
    document.querySelector(".wrap").classList.remove("hide");
  });
}());