Disable Loop Project Exercise

[00:00:00]
>> Now we wanna move on to the next TODO, which is essentially in our quiz. If we look at our finished quiz, what we want is that after somebody has clicked the button which is what this is showing now, not only does the explanation show up but also I can't click these buttons anymore.

[00:00:16]
Because what we saw earlier, disabled. So basically once I've made a choice that is my choice that is final and I don't get it back until I reload the page, for example. But what we want to happen is that I'm gonna reload this. I'm making a guess, I don't know which one it is.

[00:00:34]
Once I make my guess, I click the button and then that's it. That's the last time I can click any of these buttons. Okay, so we're gonna disable all of the buttons whenever I click one of them. So this is our next TODO seven. We're still within our event handler function.

[00:00:51]
This is what's gonna happen every time we hear a click event on either button. We want to disable all of the buttons. In this case there's two. So we're gonna use a another loop to do this. We're going to loop over the buttons again, and disable all of them.

[00:01:13]
Now earlier we had written ourselves a handy little helper function to disable a button, so we're gonna use that. Remember we have written this disable function that's gonna set the disabled attribute on the button element. So we're gonna use our disabled function in a loop to disable all of the option buttons anytime either button is clicked, okay?

[00:01:40]
Who would like to walk me through this one? Jason you wanna take a stab at it?
>> Sure, okay so we're gonna disable the button. So we would do a four similar to the other four loop we had. So four let button of option buttons.
>> Okay, sure we can do again four let button of option buttons because again, each time we do a four let of we're creating kind of a new scope for that variable.

[00:02:09]
But also we could name it something differently just to make it easier for ourselves as coders. So maybe we could name it like, I don't know
>> Simple buttons.
>> Yeah, unclickable button or something, or we could call it something else.
>> Just out of curiosity, what it makes sense to disable it in the same four loop, so we have an event listener and that first four loop that's checking to hear for a click.

[00:02:39]
So once it's been clicked can we disable and that would it make sense to disable on that same four loop?
>> We're gonna talk a little bit later about when JavaScript is running this code, but essentially what we're doing is we're talking about two different things. So this outer four loop is going to run all of the code inside of it basically when this script runs.

[00:03:07]
And in this case the script is gonna run, when the browser is reading through our HTML file it's going to see that script and it's gonna start running it immediately when we load the page. So what we wanna do is immediately when JavaScript starts running on our script we want to do something.

[00:03:24]
And in this case what we wanna do is add those event listeners. If we put, like on this same level, if we put disable button here, when would the buttons get disabled?
>> Immediately.
>> Immediately, when we load the page. So essentially I would never be able to click them.

[00:03:43]
>> Right.
>> Instead what we want is for that disabling to happen after somebody has clicked and so that's what this event handler function is about. And this is why I have to declare it as a function and give the add Event Listener method that function because what I'm saying is, Hey, JavaScript, here's some chunk of code.

[00:04:02]
Here's some function body that I want you to run after you hear a click event on the button element. So the code inside of this function, inside of these curly braces is gonna run maybe if somebody clicks later Then the code in this Chunk of have curly braces.

[00:04:29]
So this the attaching of the event listeners happens immediately when the page loads and the script runs whereas the disabling we only want to happen after somebody has clicked. So we wanna put it in the chunk of code that we're giving JavaScript to run when it has heard a click event.

[00:04:49]
Does that make sense? We're gonna talk a little bit more about kinda time and JavaScript a little bit later.
>> If you do disable button instead of the four loop, would it just disable the one button that was clicked?
>> So now we're talking about scope, right? So what is the value of button?

[00:05:05]
This is a great example. So in here, Okay up here this button inside of the four loop is, Going to be basically each button on the page in turn, right? And here We are We are declaring the same name variable. This is why I said it's sometimes useful to use different names so that we don't confuse ourselves.

[00:05:42]
But what we're doing is we're looping over the buttons again later in the program after somebody has clicked. We're looping over them again, so, We only have two buttons on our page, we're talking about the same two buttons. But in terms of what JavaScript sees and which button it knows about that's dependent on the scope that we're talking in and when this code has run.

[00:06:12]
So this inner four loop is only gonna run in the call to our event handler function that JavaScript is going to call once somebody has clicked one of the buttons.
>> I just tried, it only it only disabled one button at a time. Whichever one you pressed, the other button was not disabled.

[00:06:33]
>> So that's the thing, so if we're using button here, disable button,
>> It will just disable the one that you clicked
>> But now JavaScript is looking in it's a little scope window. It's saying like okay, where's my button? And it's finding, okay in this four loop I am currently running one of the buttons.

[00:06:56]
I'm currently talking about the first button and I'm attaching an event listener to that button, which now is going to remember the button that I was talking about when I wrote this event handler. So this is actually getting at a really cool thing in JavaScript that we're not really gonna get into.

[00:07:13]
But I get into for example in my functional programming for steps course, which is this is a closure essentially over the value of the button. Meaning that JavaScript, even though it's going to run this function later after my four loop has finished. Like after the page has loaded, the four loop is done running, somebody clicks a button, this code runs.

[00:07:34]
It still remembers the value of button at the time that it was defined in my program. So it's a big concept in JavaScript that you can get into as you continue your journey. But suffice it to say, this is a nice example of how JavaScript can kind of remember the value of the variable at the time when you wrote the code, because of the way that it looks for variables in certain scope.

[00:08:02]
All right, great. So what we need to do then is move this oops, move this disable line down into our second four a loop in order to disable each button in the second option buttons loop that I'm running here. All right, so let's see.
>> So did you want to change that name of the button?

[00:08:30]
>> Yeah, so we can change this to some other names so that we don't confuse ourselves like I don't know, I could call it other button or something like that, right? But in fact the fact that we had used the same name revealed this cool thing about the scope that we're working with.

[00:08:51]
We have function scope and the block scope and play here. But yeah, sure we can name it something else to make it clear to ourselves, so that we humans don't get confused about which one JavaScript is looking at. So keep in mind that sometimes you're writing code not just for JavaScript to read but for yourself or for your teammates or whoever else to read.

[00:09:16]
Okay, let's try this out. I'm gonna save and go back. Reload my local file and now we expect that when I click both things are gonna happen. The text are gonna show up and all of the buttons are gonna gray out. My gosh it worked. I can't click them anymore, they are disabled.

[00:09:40]
Great job y'all.