Quiz Project Disable & Enable Solution

[00:00:00]
>> So how did this go, these functions? What we've got here we've got two to do [LAUGH]. We can start with the disable and enable functions. Now, this is tricky because I asked you to set a button element attribute. And I haven't really told you what the spell is to change the attribute on an HTML element yet.

[00:00:30]
So let's go back to our console and I'm gonna go into the console in my in-progress quiz game here. Did anybody figure out how to set an attribute to a certain value on a JavaScript, sorry, on an element in the DOM with JavaScript?
>> I tried documengetsElementsByName.
>> Okay, so first we're gonna need an element to do something to, right?

[00:01:04]
So we could try, let I'm just gonna grab a button here. I'm gonna say document. So you said getElementsByName?
>> Yeah, true, yep. ByName and quotes true.
>> Okay, so true. So this is gonna now, this gives me a list of one button. So I could say, let's say b is gonna be button 0.

[00:01:39]
Maybe named that array, [INAUDIBLE]. So now b is an element. Now the thing is, in our function that we're gonna write, we're not gonna actually need to pick out an element from the DOM, because we want our disabled function to take in the button itself. So we're gonna pass in as an argument to our function an element that we're then gonna set an attribute in.

[00:02:02]
All right, but for now just so that we have something to work with I've got my b element here in the console. So the question is, how can I set an attribute on this element?
>> [INAUDIBLE]
>> Yeah, sorry.
>> Chat there [INAUDIBLE]
>> So there is actually a method on these elements called SetAttribute.

[00:02:25]
And the way it works and maybe this is also in the chat is something we can find out. If we were to, let's say I didn't know that setAttribute existed, because I didn't, right? Just a minute ago, we hadn't seen it yet. If I type setAttribute into MDN.

[00:02:43]
Look at that, I have a few options here. Let's check out this first one, setAttribute. Sets the value of an attribute on the specified element, great. If the attribute already exists, the value is updated otherwise a new attribute is added. And we see that its syntax is we give it the name of the attribute that we wanna se to set, and then the value that we wanna set it to.

[00:03:10]
So let's say that I I'm. Let's look at my b element. So, we see it has whoa, okay. That's too much, too much info. Let's look at b, we see it has a name attribute to the value of true and a value that also is set to the value of true.

[00:03:31]
So if I wanted to, let's say rename this button, I could use the SetAttribute function. This is not what I asked you to write in your disable function. But just as an example, I could say set the attribute name to anjana [LAUGH]. So now if I look at b, I see that I have changed the attribute name, I've changed its value from the original.

[00:03:57]
Okay, but what I really wanna do is disable this button. Now, in HTML I'm gonna inspect this element. There is an attribute that we can use to disable a button that is called disabled. And if I set that button, do you see? It's a little bit hard to see here, but this button is now grayed out and I can't click on it the way I can click on the false button now.

[00:04:26]
So you've probably seen this before on websites, right? Where the submit button is disabled until you've filled out all of the required fields in the form or something like that, yeah? Now, we'll notice that when I enter disabled, it put the value of disabled as being equal to something.

[00:04:44]
And the thing is that could be whatever, so I could say, disabled equals true and the button is disabled. But confusingly and this is a question that came up so I want to address it. If I let's say say disabled false you might expect alright well if disabled is false then surely the button is enabled but let's see what happens it's still disabled because the thing is the browser is looking at does the disabled attribute exist on this button it does not care about what its value is.

[00:05:15]
So what we do is if we want to enable the button, we have to remove the attribute entirely. And once we've done that I get my click ability back. So this is just some tricky stuff I just threw at you to keep you on your toes but we can set this disabled attribute now with our new friend setAttribute.

[00:05:39]
So if I were to do this on my b button we're not doing a function yet we're just manipulating this one button this one time. I could call setAttribute disabled. And we said we don't care about the value of the attribute but what happens if I try to do setAttribute disabled with no other thing is an error.

[00:06:04]
Now, this is because unlike this regular JavaScript this is a special method which has some extra guide rules in place to make sure I'm using it correctly. Like we said before JavaScript doesn't care if I pass in all the arguments that I need. But whoever implemented this function made sure to throw an error to let me know that I'm doing it wrong.

[00:06:24]
So that's where we wanna pass in some kind of value. And that value doesn't really matter it could be any string. But just to indicate that it doesn't matter, we could use an empty string. And now once I run this b.setAttribute, disabled comma empty string. There goes the button it's disabled now I can't click it anymore, like I can this one, okay?

[00:06:47]
So this is essentially this .setAttribute disabled, empty string. This is gonna do some heavy lifting here. So now we just need to functionify it. So can anyone walk me through their solution to implement a function called disable that takes in a button? Let's think through it together. Should we take a stab at it?

[00:07:16]
>> Sure, so I did mine as a fat arrow function,
>> okay.
>> Const enable.
>> Okay, let's start with disabled.
>> Disable, sorry. Const disable right equals. And then I just generic button.
>> In parentheses button so that's what we're going to name, our parameter. And it's gonna be like a button element similar to the b that we had pulled out of the console, okay?

[00:07:49]
>> Then the fat arrow.
>> Arrow.
>> And then curly braces. Then it was just button.disabled equals empty string.
>> Okay, let's make sure that that also works. I'm going to, let's try this on, Okay, so b disabled here. If we do disabled equals empty string, now b disabled is False.

[00:08:43]
Which is confusing, because now the button is enabled. So maybe we should try using the setAttribute approach cuz I'm a little bit unsure what exactly is happening here because I don't know everything about web development. Mark, do you want to chime in?
>> It should work but we should use setAttribute.

[00:09:10]
>> Let's stick with setAttribute because we know more predictably what that's gonna do. So let's try button.setAttribute, And the attribute we wanna set is disabled. And then we wanna set it to just anything at all but we'll use the empty string. So this is essentially the same thing that we called before b.seAttribute disabled whatever we're essentially just parameterizing the b part here as button and making it a function.

[00:09:44]
Cool? Great, okay. Now, we wanna function enable, which is going to remove the attribute entirely. And so, if we were to figure out. All right, how do we remove an attribute? Well, before we typed in, sorry. So yeah, if we were to type in like, hey MDN, how do I remove an attribute?

[00:10:14]
Well, turns out similar to setAttribute, there is a method on elements called remove attribute, which we just pass in the attribute name, and then that removes the attribute entirely. So here if I do, let's say b, okay, just wanna make sure that okay, so this button is disabled.

[00:10:34]
Okay, so b remove attribute disabled is now going to take away that attribute entirely. So we don't even see it anymore and the button is reenabled. Yeah, great. Okay, excellent detective work. So now, do you wanna walk me through functioning this?
>> Cons, enabled, equals, parentheses, buttoned that arrow, button.remove attribute parentheses, disabled.

[00:11:09]
>> Okay, great. So now we have a small difference between the structure of the previous function and this one which is the curly braces, right? And in this case, functionally we're not gonna have like In terms of how these are operating. We are not gonna have much of a difference because neither of these function returns anything.

[00:11:33]
Both of these functions are carrying out some other operation. So that's okay in this case, but if you had a function where you did care about the return value, just be mindful of those curly braces. Cuz that would mean you'd have to add a return statement as we saw before, okay great.

[00:11:54]
So now, let me reload, my local file and see if it updated. If it did, then I should have a disable function. Okay, great we didn't have that before. Now, we also had the option buttons variable which we had declared earlier. So let's test it out. How can I get the first button out of my option buttons, quick review?

[00:12:25]
>> Options button 0.
>> Option buttons square brackets 0, right? Great, that picks out a button. Now, what if I pass that in to my disable function, let's test it out and see if it works. The button grayed out. It's hard to see maybe on the screen but if you're trying this along with me, you should see that.

[00:12:46]
Yes, indeed this did disable the button. Now, shall we try our enable, and hopefully we still have this? So enable, I want you do it again. And option buttons 0, it's back. It's clickable again. Cool [APPLAUSE] great work y'all.