Explanation Loop Project Exercise

[00:00:00]
>> Okay, so now, let's get back to our quiz file. Okay, earlier we were working through our quiz starter HTML document or two JS quiz starter HTML document. And we had worked through a whole bunch of to-dos in the comments here and the code comments we've gone through TODOs 1, 2, 3, 4, 5.

[00:00:23]
We had written some functions, and now we've got the homestretch. The rest of the TODOs are right in front of us. So, what we're gonna do now is work through these TODOs 6, 7, and 8. And in order to do that we're gonna need a few things. We're gonna need our for loops.

[00:00:41]
We're gonna need our event handling skills. We're gonna need conditional logic to do things based on other things. So we're gonna break this down or take it step by step because that is always the key to solving complex code challenges is let's break it down. Let's go step by step.

[00:01:01]
We're going to start with TODO 6 and 7 and use our for loops. And so, we're gonna do exactly what we talked about theoretically being able to do earlier. We're gonna use a for of loop to loop over the buttons, in this case, we have two. So we're gonna loop over our buttons and attach an event listener to each button.

[00:01:22]
And within that event handler, just to start out with, we're going to try to make sure that we display the explanation text from our fact object in the div called explanation on the page. So what we want, is just the part what we're starting out with TODO 6.

[00:01:43]
We're going to use a for loop to attach an event handler. And in that event handler, we're going to make sure we add the statement text to the appropriate div on the page. So what I want to do is add a listener to each of my buttons. Conveniently, earlier, we had captured all those buttons in our option buttons variable.

[00:02:12]
So our option button variable, and if we go back to, Let me reload this file. I'm loading this locally from my HTML file. If I look for my option buttons, I see that I have this collection of two buttons. So this collection it's not exactly an array, but it is also something that is iterable like I can do a four let button of option buttons, I could do let's say.

[00:02:54]
Console.log button, and it's going to log out the button elements themselves. So our HTML collection that our DOM API's here of query selector or whatever we had used get element by ID, that's going to give us an iterable collection of buttons. So we can use a for of loop to iterate over it.

[00:03:18]
So let us try to do this where instead of logging the buttons, we're actually adding a click handler to each of the buttons. Can anybody walk me through how they would start approaching this with a for of loop? Who'd like to take a stab at it, Paul?
>> So for, then in parentheses button of option buttons,

[00:03:42]
>> Okay, like this.
>> Yeah.
>> Okay, is there anything else that we need to do in a for of loop?
>> Let, sorry.
>> So the let is actually doing some work here. Because what that's doing is essentially, this button here, JavaScript doesn't know what it is.

[00:04:04]
We are basically declaring it like a little local variable. And remember how we said yesterday about scope that variables have scope when they're inside of a function. Let's say we get a new scope for those variables. For loops are another case where with let and const, we get a new kind of scope for our variables, just as a fun fact.

[00:04:28]
Okay, and I'm just gonna add, I'm gonna bring this curly braces way down here because we're going to do a bunch of stuff inside of this loop, okay? So we've got our for loop started, so for lead options for like button of option buttons, great. And now, what do we want to do?

[00:04:47]
We want to add a click event listener. So, how can we do that? Paul, do you want to keep going?
>> Yes, so, we have the button in hand that is now.
>> We can now talk about button.
>> This one, and then it will be the second one for each loop.

[00:05:05]
>> Exactly, right? So just like here when we had said for left button of option buttons console log button, the first time it runs, it's the first button which is true, and the second time it's the false button, exactly.
>> So you can just do button.addEventListener.
>> That's the method we need, okay?

[00:05:24]
And then how does the addEventListener work again? And look at my IDE being so helpful as to tell me some complicated things that aren't really actually making any sense to me. All right, addEventListener takes two arguments. The first thing we need to give it is?
>> Click.
>> Click in this case, so the name of the event, and it's a string, the name of the event, and then use a comma.

[00:05:45]
>> A callback function.
>> A callback function.
>> So in parentheses E or error.
>> Yes we could say, E or event I'll just spell it out because just to make it even clearer for anybody, or maybe future me who's rereading this and doesn't remember what it is, okay?

[00:06:01]
>> And then the fat arrow.
>> Arrow.
>> And then the curly braces.
>> Curly braces. Okay. And now we're gonna do some stuff, and I'm gonna move the end of our event handler function body down here because we're gonna do a bunch of stuff in the event handler, okay?

[00:06:17]
So great, so now, we've got an event listener added to each of the option buttons. And what I'm gonna do here before we even do what we wanna do, I'm just gonna do a nice little developer trick of saying like, Heard a click. [LAUGH] Just to make sure that this is actually working.

[00:06:40]
So I'm gonna save my file, go back and reload it. And now, if my event handler is attached, when I click a button, we should see heard of a click. And both of the buttons should say the same thing, heard a click, heard a click. So my heard a click is happening six times here, so far.

[00:06:58]
Okay, great. All right, now let's actually do something useful. I'm gonna get rid of that. So who could walk me through the second half of this ask here? Which is, one second, so we can read this better. Within the event handler, we want to set the text of the div in my HTML, which is intended to contain the explanation, which luckily earlier we had captured as the variable explanation.

[00:07:31]
We're going to put text inside of that. That is the actual explanation for our fact that we had declared earlier. Okay, so this is what we wanna do now inside of our function. So who would like to walk me through how we can do that? Setting the text of the explanation element to the explanation within my fact object.

[00:08:00]
Do you want to take a stab at it?
>> Would it be explanation =fact.explanation.textContent?
>> Okay, we're getting very close. Let's talk about, so we have two things, we have our explanation right now, refers to what? Let's scroll up in our code and figure out what explanation is gonna be.

[00:08:25]
>> So the element.
>> That's going to be the element. And so, the element is what's going to have text content inside of it. Now what about fact.explanation? What is that going to refer to? To the value that's stored in that premise.
>> Exactly, it's going to be the value of the property explanation on my fact object, which in this case is a string, that is the explanation text that I want.

[00:08:52]
So we just need to hook one up to the other.
>> Explanation.textContent.
>> Beautiful.
>> =fact.explanation.
>> All right, let's give this a shot. Now, as always, in programming, the best way to figure out if it's working is to try. So let's see what happens. So I'm gonna save my file, go back, reload so that I get my changes.

[00:09:18]
And now, I expect that if I click on either button, basically the same thing is gonna happen. We're going to see the explanation pop up if we've done our job. Moment of truth. Great! I clicked the true button and it worked. And if I click the false button, I just reloaded, and if I click the false button, it also worked.

[00:09:42]
We did it, we've now attached to an event handler that modifies the page. We're not totally done though because right now, I can keep clicking these buttons and nothing happens because it's setting the text content again and again to the same thing. So really, we want a couple of other things to be happening here.

[00:10:00]
So great, we've done our TODO number 6. We've got our event handler. We're doing something to the page. Now, we can keep going and do the other stuff we want for our quiz game to work.