JavaScript

Javascript Lesson 36: DOM – How to toggle Background color

In the previous knowledge bit, we have introduced DOM events and its different method. Now in this knowledge bit, we are going one more step in deep and we will demonstrate How to toggle Background color. So here we will learn that how we can change the HTML tag property by using DOM JavaScript.

How to toggle Background color:

Let’s create a simple HTML page which consists of the single button, and when we click on the button it will change the background color from white to blue. First, we need to create HTML web page with one button. Here is HTML code below for page:

 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> DOM - How to toggle Background color</h1>
<p>Click To Change Background Button</p>
<button>Click Me</button>
</body>
</html>       

 

So here is the HTML code for our web page. This is how our site would look like.

 

How to toggle Background color DOM

Now, we need to create our JavaScript file and then integrate that file with our HTML web page. To integrate your JavaScript with HTML page we need to add the <script> tag in the head of web page and then add the source into that tag. Like our JavaScript file name is “ToggleBackgroundColor” we will write the source in the script tag “ToggleBackgroundColor.js”. Here is the demonstration below:

 

<script type="text/javascript" src="ToggleBackgroundColor.js"></script>       

 

To assure that whether our page is integrated properly with HTML web page or not write the simple alert message. In our case we write the following code:

 

alert("Perfect!");       

ToggleBackgroundColor.js:

First, make sure that you have saved both HTML and JavaScript file before opening your web page, and when you open your webpage then you will get the alert message with Perfect written. Here is the demonstration below:

 

How to toggle Background color using button
You can notice that we have got the alert message which means that everything working perfectly. You can also notice that all the content of the page including Heading, paragraph tag and button is not yet on the page and the site content will not appear until we click this “OK” button. So it means that our JavaScript code file load first before our HTML page. Our JavaScript code relies on HTML tags that are mean our Code will load first then our button load. While we want our button to be loaded before JavaScript code. For now, we move our JavaScript code from head to after button tag inside the body. So our button tag will load first then our JavaScript code will load. Now we will test our button and function by simple writing an alert method in our JavaScript code. Here is the demonstration below:

var button = document.querySelector("button");
button.addEventListener("click", function(){
alert("Everything Working Perfectly");
});       

Here is our code, so when we click on the button, the alert message “Everything Working Perfectly” will appear.

 

Now we are moving ahead and write a code which changes the background color from white to blue when we click on the button. Here is javascript code to change the background color to blue.

var button = document.querySelector("button");
button.addEventListener("click", function(){
document.body.style.background = "blue";
});       

When we click on the button on our HTML web page it will change the color from white to blue, here is demonstration below:

Javascript lesson: changing background color

 

You can notice that when we clicked on the button it changed the background color to blue. Now if we want that background color change again to white if we click on that button again. So to that, we will add some logic to our button. Here is JavaScript code below:

 

var button = document.querySelector("button");
var isColored = false;

button.addEventListener("click", function(){
if(isColored){
document.body.style.background = "white";
isColored = false;
} else{
document.body.style.background = "blue";
isColored = true;
}
});       

 

You can notice in above code after selecting the element I declared a Boolean variable “isColored”.I’ve  made its false because when we refresh then it will make the background white. Then in our callback function, we have created if else loop which will check the background color whether it is purple or white, then it will change the color. Here is the output below:

 

 

Conclusion:

In this knowledge bit, we have studied more about events and we have learned that how we can use the DOM events and How to toggle Background color in javascript. We have learned to give logic to our HTML button. We have also learned that how we can access JavaScript file from inside HTML page.  DOM events are very useful to give logic to the HTML page and this knowledge bit helps you to understand the basic of DOM events.

1 Comment

Most Popular

To Top