This tutorial is going to be a very basic example on how to change the background color of a div element using simple javascript.
Prerequisites:
The only prerequisite you need, is the basics of html, css and javascript.
What will be covered:
a. How to get an element from the DOM(document object model)
b. How to change the values of css properties using javascript.
Let's begin..
Step 1:
Open your favorite code editor/IDE, and generate the following html boilerplate code. You can also change the title to "Div color changer" if you like.
Html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Div color changer</title>
</head>
<body></body>
</html>
Step 2:
Create a div with an id of "ball" inside the body tag of your html.
Your code should now look like this.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>div color changer</title>
</head>
<body>
<div id ="ball"></div>
</body>
</html>
Step 3:
Next, you create an external css file with the name "style.css" inside the same folder as your html file.
When you've done that, include a link to "style.css" in the head tag of your html file.
This is how your code should look now.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>div color changer</title>
</head>
<body>
<div id ="ball"></div>
</body>
</html>
Step 4:
Copy and paste the following css styles into your "style.css" file.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#ball{
height: 20rem;
width: 20rem;
border-radius: 50%;
background-color: red;
}
Now for the fun part!!
Step 5:
Create a "script.js" file and add a link to that file using the html script tag. This file should be created in the same folder too.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>div color changer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="ball"></div>
<script src="script.js" type="text/javascript">
</script>
</body>
</html>
Step 6:
Add the following code into your "script.js" file.
const redDiv = document.getElementById("ball");
redDiv.addEventListener("click", ()=>{
redDiv.style.backgroundColor = "blue";
});
Viola!!
Now if you open up the html file in your browser and click on the red div, it changes to blue.
Javascript explained:
So the first line of the code simply looks into our html file to find an element with the id of "ball" then it collects that element and stores it inside the "redDiv" variable.
The second line adds an event listener to the div element that has been made available through the "redDiv" variable.
The first argument of the "addEventListener" function is the event we are listening for; in this case, the "click" event. The second argument is an arrow function that runs whenever there is a click event on our div. What the arrow function does, is to change the background color property of our div to blue.
If there are any questions, you can leave them in the comments below, and I'll do my best to answer them as soon as possible.
Happy coding!!
Top comments (0)