How to change background of div (click event) using HTML, CSS and JavaScript
Posted on Feb. 10, 2021, 8 p.m. by Bishal ( 10131)
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.
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
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.
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
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]
}
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>
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]
}