How to change background of div (click event) using HTML, CSS and JavaScript


Posted on Feb. 10, 2021, 8 p.m. by Bishal     (  7161)


Card Thumbnail
In this blog of Code With Bishal, I am going to show you how can you change colour of a div using the JavaScript click event. So, stay with me till the end and you will get all the downloadable resources and we will create this project using HTML, CSS and JavaScript.

 

DigitalOcean Referral Badge

 

So, What actually is a JavaScript click event in DOM addEventListener?

The Document Object Model (DOM) addEventListener adds an event listener to an element specified. It does not overwrite existing event handlers, it simply adds a new event.

 

For Example:
addEventListener()

 

If you want to remove an existing Event Listener you can easily remove it using removeEventListener

 

DigitalOcean Referral Badge

 

For Example:
removeEventListener()

 

So lets have a quick demo on what are we gonna create today

Demo:

 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quae expedita nisi dolor dignissimos at reiciendis quos blanditiis dolore. Nulla architecto iure soluta necessitatibus at sit est maiores commodi fugit.

 

DigitalOcean Referral Badge

 

Step by step guide for changing colour of Div using Click Event JavaScript:

  • Create a file with the name index.html

  • Open index.html

  • Add the Broiler plate of HTML

 

DigitalOcean Referral Badge

 

Broiler Plate of HTML:

<!DOCTYPE html>
<html>
<head>
<title>Change colour of Div using click event - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>

 

  • Create a file script.js

  • Link External JavaScript file with your HTML file

Here is how can you link:

Add these code in the <head>  </head> of your HTML document:

<script src="script.js"></script>

 

Now add some codes to the script.js file:

 

const button = document.querySelector('.change')
const container = document.querySelector('.color')
container.style.padding = "50px";
container.style.margin = "20px";
const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple', 'orange', 'cyan', 'white']
container.style.backgroundColor = 'violet'
button.addEventListener('click', changeBackground)
function changeBackground(){
const colorIndex= parseInt(Math.random()*colors.length)
container.style.backgroundColor = colors[colorIndex]
}

 

DigitalOcean Referral Badge

 

Source Code

1) HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Change colour of Div using click event - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="color">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum quae expedita nisi dolor dignissimos at reiciendis quos blanditiis dolore. Nulla architecto iure soluta necessitatibus at sit est maiores commodi fugit.
</div>
<button class="btn btn-primary change">Change Color</button>
</body>
</html>

 

DigitalOcean Referral Badge

 

2) JavaScript Code:

 

const button = document.querySelector('.change')
const container = document.querySelector('.color')
container.style.padding = "50px";
container.style.margin = "20px";
const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple', 'orange', 'cyan', 'white']
container.style.backgroundColor = 'violet'
button.addEventListener('click', changeBackground)
function changeBackground(){
const colorIndex= parseInt(Math.random()*colors.length)
container.style.backgroundColor = colors[colorIndex]
}

 

DigitalOcean Referral Badge

 





Leave a Comment:
No comments Found. Be the First one to comment