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.
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.
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.
