So, if we'd placed this at the very beginning, then our page wouldn't have loaded when the script executes, and we can't really have that. So, now I'm going to go down, and all of this stuff, this gobbledygook down here at the bottom, I'm going to copy that, or cut that, actually, I'm going to cut it, and then inside that script tag, I'm going to paste it. So, I'm basically just trying to save us a little time, and a little typing. So let's pay attention to this and see what's happening here. This first line inside the script tag right here, it says, "document.getElementById('color').onclick = changeColor".
Ooph, That sounds terrifyingly difficult, but, it's actually really really simple. This same way that we used CSS selectors earlier, right up here, to target an element on the page, we're using what we call "dot syntax" to do the same thing. We're saying "hey, look inside the current document, "and then find an element by its id attribute", "getElementById" attribute, which attribute? Color! So, if you look through your HTML, you can see that the button right here, this element, has the attribute of id="color".
This could have been "switchColor", "toggleColor", "changeColor", whatever I wanted to call it. Essentially what this is, is it's the name of a function. And you can see right here, I'm creating a function, and I'm naming that function "changeColor". And, just like CSS with these curly braces, functions also have little curly braces that indicate all of the code that should run when that function is being called. So, the easiest way to think about a function is, it's just a block of code that's saved and stored, and you can run it whenever you want by just calling the function.
So, all you have to do to make this code execute, is call the function, which is what we're doing right here. So essentially, it's saying "hey, every time "this button is clicked, run this code right here". Okay, cool, now inside the code I have a little if statement. Before we get to that, I need to setup a variable. So, I'm going to go down below the line that says "document", and I want you to type in "var", then a space, var is a keyword that says "hey, I need to create a new variable". After that, we're going to do "currentColor", you'll notice this is all one word, and I'm using what we call "CamelCase" naming, Or "CamelCase Naming Convention".
It's lowercase for the first word, and then every word after that that's jammed together gets an uppercase. So, "var currentColor =" and then, in quotation marks, the word "red". Quotation marks makes that a literal string, meaning just these letters, okay? So, essentially, what this is doing for us, and I guess I can get rid of some of this white space here, what this is doing for us, is it's saying "hey, I want "a variable called 'currentColor', "and I want its value to be red". This "=" is what we call, an assignment operator, it's assigning a value to the variable.
What's a variable? Well, I don't know, the easiest way for me to describe a variable is a pickle-bucket. When I was a little kid, I used to go down to the stream behind my house, and I had a pickle bucket, and everyday I would find something in that stream, and put it in the pickle-bucket. Some days it was an unlucky frog, other days it was a, like a crawfish, it may be a rock on a slow day, but it was something that I wanted to check out later, and so I would just store it in the pickle-bucket, and the pickle-bucket is like that, it's a variable, you can put anything you want to inside of it.
Okay, so I'm going to say "if(currentColor)". What's that? That's the variable we just did here. and then I'm going to say "= =", so, two equals, and then the word "red", in quotation marks, again. So, what does that do for me? Well, remember, this one equals sign right here, is what we call an assignment operator, it assigns the value. The double equals that I have right here, checks, it checks the value. So, it's saying "if currentColor is equal to red", so, "if currentColor is red, let's do something". Now, the "do something" is going to be inside these curly braces right here.
So, I'm going to change the color to green if the current color is red, so basically, it's saying, "hey, if the current color is red, take the body "and change that to green". Pretty easy right? Now, since I want this to toggle back and forth, I need to update my variable. Remember variables, just like my pickle-bucket, can have anything inside them that I want. So, in this case, I'm going to change that value and I'm going to say "currentColor is now equal to green". And you'll notice what I'm doing here is I'm using the assignment operator again, so, equals, okay? So, this is saying that, " hey, "if the current color is equal to red, "if the currentColor is red, then find the body element, "change its color to green, and then update my variables "so that it's now green", and the next time it checks it, it will say "oh no, it's not red".
Okay, and actually, I love saving myself some time, so, I think what I'm going to do is, I'm just going to copy this, and then inside the else statement, I'm making sure I'm inside that line there, I'm just going to paste it, okay? Now, it wouldn't make a whole lot of sense if I changed the color from green to green, so, I'm going to change the color back to red, and I'm going to change the value of currentColor back to red. There's one last thing I need to do here. And I'm going to save that. One last thing, you'll notice that after the else statement, I have a little keyword here that says "return". And that basically is saying, "okay, "after this function is run, what value "do I get returned out of the function?" Functions don't have to have a value returned out of it, it's just, in this case, it's nice because we want to make sure that this variable: currentColor = "red", that that's maintained.
You'll notice that it toggles back and forth, between green to red. Now, you may notice that it's changing only the paragraph, and not the heading, and you might say to yourself "well, wait a minute, "didn't we apply that to the whole body tag?" "Why is it just affecting the paragraph "and not the heading?" The reason for that has everything to do with CSS, and it's because we applied a specific color to the H1. And in CSS, the more specific the value... Is the winner when there's a conflict. So, essentially, because that is targeting the H1 instead of just sort of, a global body property, it overwrites that.
This course is part of a Learning Path approved by the American Marketing Association.
Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
- What is web design?
- What is a web designer?
- Learning to code
- Choosing a web host
- Working with a CMS
- Exploring how websites are structured
- Choosing your framework or software
- Designing with standards and accessibility in mind