Did you give it a go?
Don't worry
if you couldn't do it. We're going to be running through the entire solution video right now.
So here we are, where we left off.
We've got this checkbox, but obviously now nothing happens when we check it on and off, we've got
our file and I ran through the HTML.
We've just got our script tags here with nothing in it.
So what do we do?
Well, we've got to listen for an event specifically, I want to listen for a change event.
Where do we listen for that change event?
Well, look at our browser.
That's right.
We're listening for the change event on this checkbox.
That's where the change event is going to be fired from.
And when that's fired, we want to do 2 things right.
The first thing we want to do is we want to remove the disabled attribute on all those inputs.
And the second thing we want to do is we kind of want to remove that disabled class styling.
So if we scroll up in our code, we can see that we've got this label and on the label we've got a class
called disabled-label.
Right now, the disabled-label,
if we just go here, we've just given the label a certain color.
So all we want to do is we want to remove that styling, that class.
So those are the two things we want to do, and it really isn't that difficult.
Let me now remove myself so I don't block any code.
All right, let's begin.
What's the first step?
The first step is to grab that checkbox, because that's where it all begins, right?
We're listening for a change event on that checkbox.
So let's grab our checkbox, where it all begins.
How do we do that?
Well, it's very easy.
Let's define a variable in JavaScript by using the let keyword.
Let's just call it checkbox for lack of a better word.
We can access this checkbox by starting at our document object. On here,
we've got getElementById(), and the ID we gave it was billing-checkbox.
Let me just confirm it is billing-checkbox.
If we scroll up, there's our input of type checkbox with an ID of billing-checkbox.
So there we go.
We've got that checkbox in a variable.
The next step is, is let's add the change event listener.
Right.
We want to listen for an event.
We do that by accessing our checkbox element,
and on here the DOM gives us access to a method called addEventListener().
We want to listen for the change event, and when this change event is fired,
the second argument to this method is a callback function.
It's something we want to execute when we hear that change event. And let's just call our function,
toggle ...
toggleBilling.
We could call it anything we want.
The final step is let's define the function
called toggleBilling.
It really, really is this easy.
How do we define a function in JavaScript?
Easy.
We just use the "function" keyword.
This is a reserved word in JavaScript.
Next, we've got to define the function that we are creating and we called it toggleBilling.
You define a function by following it with parentheses, and then all your business logic and code resides
within these curly braces.
And this is working.
Let me prove it to you.
Let's just console log
"hi".
So every time this change event is fired, this toggleBilling function will be fired.
And in the toggleBilling function we've just got console.log
"hi".
And I know I'm going slow, but it's important to understand this.
Let's go to the console.
Let's now start toggling this on and off, and you can see every time we do "hi" gets consoled.
Got it.
So we know it's working.
So let's delete this console.
What do we want to do?
Well, firstly, we need to select all billing items.
Or should I call them billing inputs?
Let me call them billing inputs,
right.
If we scroll up in our code,
'm wanting to grab both of those inputs.
There's two of them.
There could even be more in your site.
They could be a whole lot more.
So it's going to be a collection.
That's something you need to realize.
And then we're going to loop through that collection, and we're either going to remove or add that disabled
attribute.
Have you got it?
Okay, so how do we then put all of these billing inputs into a collection?
Well, let's define a variable.
Let's just call it billingInputs.
And we can access this collection by accessing our document object.
On here, we've got querySelectorAll(), and this will return a collection, specifically a NodeList
collection.
And let me prove it to you.
We want to select what?
Well, we want to select all items with an ID of billing.
Remember, this is actually done on the parent.
Let me show you.
So on the parent fieldset, we've got an ID of billing.
Then this just works just like normal CSS selectors.
So we're using a space to denote a child.
The child we want is an input, but not all inputs, just with type of text.
So we're being very, very explicit here as to what we want.
And as I mentioned, this will return a collection and I'll prove it to you.
Let's console log billingInputs to the screen.
So let's go to our browser,
access our console,
and let's toggle this off ... and there's our NodeList.
And if we open up our NodeList, how interesting is that?
We've got our inputs. And you'll notice that there is a length property here.
This is given to us by the DOM, so we can easily access this length which we will have to access because
we need to know how many times to loop through this collection.
Well, let me say it in another way.
We need to know how many items are in here,
so when we run our for...loop, which I'm going to be doing now, we know how many times it needs to run.
Okay.
Very, very simple.
Whew.
I know, I know.
I'm going a bit slow, but I want you to follow along.
So we've got our billingInputs,
okay.
Let's just deal with one thing at a time. Before we deal with the class, adding and removing that,
I want to just finish with this billingInputs.
I want us to remove and add that disabled attribute.
How do we do that?
Well, we need to loop through the entire input collection.
And on each loop we want to add or remove
the disabled attribute.
That's what we want to do now.
And how do we do it?
Well, it is very, very simple.
We just need to use the for...loop.
The for...loop is very simple.
Let me not confuse you with all the all the words first.
I'll walk you through it.
So in order to do a for...loop, we need to use the "for" reserved word in JavaScript.
And it takes 3 arguments.
The first argument is we need to keep track of how many times we loop.
Otherwise it's going to loop forever and it will never stop.
It'll be a problem.
And we normally loop through by defining a variable and the variable needs to start somewhere.
So let's say we define a variable as "i", starting at zero because we want a loop to start at zero.
The second argument to this for...loop is what?
Well, we have to tell the JavaScript parser when to stop, and we need to stop when "i" is less than billingInputs
billingInputs,
remember that? And remember we saw a length property.
Right.
So we know that "i" starts at zero.
And in order to access the first item in a list in JavaScript, we use square bracket notation zero,
that accesses the first item in a collection.
That's just the syntax of JavaScript.
So we know at zero we're accessing the first input, then the second loop we want to increase "i" to 1,
then it's going to access the second input in the collection and then it's going to hit this
"i" is less than billingInputs length,
so
when "i" gets to 2, that's going to be false
and then we don't loop through this anymore.
So that's why it will put a stop to it.
It'll be a finite loop.
In other words, the final argument to this for...loop is what happens at the end of each loop.
Well, at the end of each loop we just want to increase the variable "i"'s value by one, and we denote
that by two pluses (++) in JavaScript.
So there we go.
It is that simple.
Now all we want to do, is if the disabled property is set to true,
we want to set it to false and vice versa.
Right, that's the goal.
How do we do that?
Well, all we need to do is access our billingInputs.
We want to access the first item in that input when "i" is zero and then the second when "i" is one.
Then we want to access the disabled attribute of that input.
And what do we want to do?
Well, in JavaScript we've got this exclamation mark which basically just gives you the opposite.
It's another word for not.
And then of course, we want to exactly access the same thing.
So basically what we're doing ... disabled I spelled that wrong.
So basically here, what we are doing, is we are accessing the disabled property.
So it's either going to be true or false, that disabled attribute, and then we're going to set it
to the complete opposite.
So on the first iteration, we know the disabled property is going to be set to true, but we're going
to assign it the value of false.
So we're going to dynamically update the disabled attribute.
Let me show you what I mean.
Let's go to the browser and now let's toggle this checkbox.
How awesome is that, my dear students. I hope you've got a big smile on your face and you can see how
easy it is.
This isn't tricky stuff.
The final piece to the puzzle ðŸ§© is amending the styling of those labels.
In fact, we want to remove a class
when it's unchecked.
And then we want to put the class back when it's toggled again.
How can we do that?
Well, we've got all the billingInputs, but now we don't need the billingInputs.
We want to select all the labels.
Because those are the ones we want to affect, right?
So let's just call it billingLabels and we can do it in exactly the same way,
querySelectorAll(),
we want all the classes with billing-label attached to them, all elements with the class of billing-
label.
If I scroll up,
that's what we're getting.
We're getting all the labels that have a class of billing-label.
Does that make sense?
So we've got our labels right, and we're still going to be now doing code within this for...loop because
we're going to be for...looping through all of those labels.
And all we want to do now is toggle the class of
disabled-label.
We're just going to be toggling that on and off.
In order to do that, we access our billingLabels collection.
We access whatever item in that collection
we are in the loop, at any given time,
and then what's really cool, is we've got this classList property and in that we've got a method called
toggle(), and it literally just toggles a class.
What class are we wanting to toggle?
Well, we are wanting to toggle the disabled-label class.
Does that make sense?
This classLists and this toggle() - that's given to us by the DOM,
by the way. It's not JavaScript per se, but we use JavaScript to access it.
All these brackets, all the dots, these are all JavaScript syntax.
But anyway, this should work, right?
If we go to our browser and now we start toggling this, you can see ever so slightly that the label
styling has changed.
You know, I can make it more obvious if we scroll up here,
to our disabled label color,
we can just say color
let's just do red.
So it's hideous.
I know, but you'll notice a drastic change now.
Right.
How awesome, my dear students.
And of course, what's really cool about this, because we have required on these inputs
if the user types something here, something here, but doesn't fill anything in the billing address
and tries to submit, we will get prevented from doing so.
Front end validation is working.
Of course, if the user disables this, then we are allowed to submit the form.
Right.
How cool.
And I hope you followed along.
Just to briefly give you a summary.
We grabbed our checkbox.
We then added an event listener on that checkbox, and the event we wanted to listen for was the change
event.
Every time a user changes the checked status,
that change event will be fired by the DOM.
When that happens, we want to execute a function called toggleBilling and then we just defined
toggleBilling.
All we did was we got a collection of all our inputs and labels.
We then looped through that collection.
We grabbed each item in that collection.
And of course the two things we did was one, we removed and added that disabled attribute by using
that exclamation mark in JavaScript.
And the second thing we did was we toggled those classes on and off - that disabled-label class.
And what's really cool to prove that it is toggling in real time, let's inspect this element.
I'm actually glad I almost actually almost forgot to even show you this.
What's really cool is if we grab this name right now, we've got the class of disabled-label.
Can you see it?
But if the user toggles this checkbox,
what's going to happen?
Well, it disappears.
How awesome.
And that is because we've accessed this toggle() method on the classList and we are toggling that class.
So every time that event is fired, that class is being toggled.
It's being included and excluded.
If we check it again, it's added back.
We uncheck it, it's removed.
How awesome.
So there we go.
Hope you're having a lot of fun.
Hope you're learning a ton.
This was just a very, very rudimentary example of showing you how we can use the enabled and disabled
pseudo classes.
See you in the next lecture.