Transcript from the "Disable Loop Project Exercise" Lesson
>> 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?
[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, when we load the page. So essentially I would never be able to click them.
[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.
>> 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.
>> I just tried, it only it only disabled one button at a time. Whichever one you pressed, the other button was not disabled.
>> So that's the thing, so if we're using button here, disable button,
>> It will just disable the one that you clicked
[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?
>> 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: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.