Transcript

          Okay, then.

So in this video, I want to show you how we can easily add and remove classes from elements.

So first of all, you can see I've got this dummy content right here.

We have a P with a class of error and this stuff inside.

Now, I've also linked up a styles.css stylesheet in the head, and that's over here.

Just two very simple styles.

One for a class of error padding, ten pixels, color crimson and a border of crimson as well, and

one for a class of success padding ten color lime green and a border of lime green as well.

Now currently this has a class of error.

So if we view this in a browser, we can see something like this, this red text with a border of green.

If we change this to success, then we see the green text and the green border.

Okay, so what I'm going to do is show you how to change classes from the JavaScript.

So let's get rid of all of last lessons code and instead what I want to do now is grab first of all,

the P tag.

So this thing right here.

So I'm going to use the query selector to do that and store it in a constant called content and that's

equal to documents, dot query selector, and then the P tag.

Okay.

So now we have a reference to that.

What I'm going to do is log out a whole list of this element's classes so I can do that by saying console

dot log, then the content dot class list.

So this is a property and it gets us a list of all the different classes this element has.

So in the console we can see we get a Dom token list and we can see just one thing in here error.

So that's this class right here.

Now if I give this another class, I'm just going to call it another and also test.

I'm going to save it.

And we can see now we have all of these different classes inside this token list.

So that's a way to get classes that an element has.

Now, what if we want to add or remove classes?

Well, let's try first of all, adding one.

So I'm going to say content dot class list to get that class list.

Then we can use a method on this class list called Add.

And that's how we add a class.

Now inside here, we pass a string of the class that we want to add.

So say I want to add a class of error.

And what I'm going to do is to begin with, I'm going to get rid of this so it doesn't have that class.

Save it.

And over here, I'm now taking this content, this P tag, and I'm adding a class of error to it.

So if I save it now, even though I removed it from the HTML, when we first get that class list at

the top of the JavaScript file, it doesn't have a class yet, but then we add the class and now we

can see it right here.

So then how do we remove a class?

Well, I'm going to just duplicate this and change this to.

Remove, and then that is going to remove the error class.

So if I save it, then we're not going to see a class anymore.

Okay.

So then that's how we add and remove classes.

Now I'm going to add the success class.

So I'll say content dot class list, dot add and success.

And we should see that this is now green because we have the success class.

Awesome.

Okay, so that's a simple way to add and remove classes from tags in the HTML page.

So let's just comment all of this out.

And I've actually got a little challenge for you to do.

So I'm just going to copy a bit of HTML from my GitHub repository right here and I'm going to paste

it inside over here.

So let me get rid of that and then paste in this content.

And it's just a series of P tags.

Now some of these P tags has the word error inside and some has success success and some have none.

Okay.

So they don't have error or success.

Now the challenge is I want you to query all of these elements and then I want you to cycle through

them and I want you to give any tag a class of error where error is inside the text, and I want you

to give any tag a class of success where success is inside the text.

Okay.

So if you want to parse that here and then try it yourself, then unpause it and see how I do it.

Okay then.

So this is how I'm going to do it.

So if we go back over here, first of all, I want to get a reference to all of those different P tags.

Now to do that, I'm going to say const, call this errors and say that's equal to documents, dot query

selector all and we want all the P tags.

So that's all the P tags.

First of all, remember this returns a node list and we can use for each on a node list to cycle through

them.

So I'm going to say Paras dot for each and for each paragraph.

I'm going to pass that into the callback function.

I'm just going to call it P, You can call it whatever you want.

Then I want to check if the text inside each paragraph as we cycle through them has either error or

success in it.

Now, then in previous lessons, when I showed you how to get the text content of something I've used

in a text so we could say console dot log, for example, p dot inner text like that.

Okay.

And if we do this then we should see all of that in the console.

Now that is a fine way of doing it, but another way of doing it is by using the text content property

and that's going to get us exactly the same.

So what's the difference then?

Well, the difference is if we use inner text, then it will get us all the text that's visible.

So say for example, I have something here like a span tag surrounding this error.

And let me just put the closing tag there.

And I give this a style equal to display none, right?

Well, what that is going to do is hide this error from the page.

Now, if I look in the first paragraph, we don't see error.

So if I use now over here inner text, what that does is get us all of the visible text inside that

element.

Now error is no longer visible, so we don't get that.

Now if I use text content, let me show you this text content.

What that does is get all of the text inside the tag, regardless of whether it's hidden or not.

So if I save this JavaScript file and come over here now we can see we get all of that.

We get the error text as well, even though it's hidden.

So what I'm going to do in this example, even though you could use inner text, I just wanted to show

you the difference.

I'm going to use text content, so I'm going to say right here that we want to check if the text content

of any of these p tags as we cycle through them has either error in it or success in it.

So let's check for the error, first of all.

So let's do a little if statement.

We'll say if and then we want the p the paragraph that we're currently iterating through dot text content

dot includes.

Remember, we can use this method to see if a string and that's all this is.

At the end of the day, it's a string of text.

We can use this to see if it includes a certain word or phrase.

So I'm going to see if it includes the word error.

So this returns a boolean.

If it does include that, then it's going to return true.

And we're going to fire this code.

If it doesn't, it returns false.

So if it returns true, it means that that paragraph that we're currently iterating has error inside

the text.

And if that's the case, what we want to do is give that a class of error.

So we'll take the paragraph, we'll say dot class list, and then we'll say dot add, and we want to

add the error class.

Simple.

So if we save this now and preview in a browser, we can see anything with error inside.

It is given this error class and we can inspect to make sure that we have that error class on those.

Awesome.

Now we need to do the same thing with anything that has success in it.

So we're going to do another if check to say if p dot text content.

And again if you want it to here, you could use inner text.

I'll do that here just to show you dot includes and we're going to see if it includes now success.

If it does, then this returns true and we'll fire this code block And inside we want to take that paragraph

tag and give it a class so we'll say class.

List, dot add.

And we want to add a class of success like so.

So save it.

And let's have a look over here and we can see now anything we success in the text has this class of

success.

Okay, so that's how we add and remove classes.

Now, there's one more thing I'd like to show you, and that is how to toggle classes.

So we've seen Add and we've seen remove up here to either add or remove classes.

But what if we want to toggle a class?

So if an element has a class, we want to take it off.

If an element doesn't have the class, we want to apply it.

Well, we could use the toggle method.

So what I'm going to do is, first of all, come over here and I'm just going to give this one a class

equal to title.

Now I'm going to grab that over here by saying const title is equal to document dot query selector,

and I'm going to grab the title class.

So we have that now.

Now what I want to do is just say title dot class list and I'm going to toggle a class and that class

is going to be test.

So currently it doesn't have a class of test, but if I use the toggle, it means that it will give

it that class of text.

So if we take a look at the H1, we can see it has a class of test now.

Now if it has a class of test and we use toggle again, then it's going to remove that class.

So if we save that and now preview it, we can see it gives it it to begin with.

Then because it has it and we run it again, it removes it.

So now we no longer have it.

So there we go.

Add, remove and toggle three methods that we can use on this class list.

Property of elements to add, remove or toggle classes.