In this blog post, you'll learn how to change background colour on click using HTML, CSS, and JavaScript. We'll explore three different techniques: changing a single color, cycling through a set of colors, and randomly selecting a color from a palette or array list or color list. This is a simple but powerful technique that can be used to create dynamic and interactive web pages. I have also shared the projects in which I have used this technique.
Video Tutorial on Changing Background Color On click:
Change a Single Colour on Click.
To change a single colour on click, you can use the following steps:
- Add a click event listener to the element whose background colour you want to change.
- In the click event listener, use the element.style.backgroundColor property to set the background colour to the new colour.
Here is an example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color | maketechstuff.com</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin:0px;
}
.box{
width: 100%;
height: 100vh;
cursor: pointer;
background-color: pink;
transition: 0.2s;
}
JavaScript
let box = document.querySelector(".box");
// Change single color.
box.onclick = function () {
box.style.backgroundColor = "#000";
}
Change Multiple Colours on Click.
To change multiple colours on click, you can use the following steps:
- Create an array of colours that you want to use.
- In the click event listener, get the next colour in the array and set the background colour to that colour.
- If you reach the end of the array, start over at the beginning.
Here is an example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color | maketechstuff.com</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin:0px;
}
.box{
width: 100%;
height: 100vh;
cursor: pointer;
background-color: pink;
transition: 0.2s;
}
JavaScript
let box = document.querySelector(".box");
// Change multicolor on click.
let colors = ["red", "blue", "green", "pink", "violet", "lightblue","yellow","purple","darkblue"];
let i = 0;
box.onclick = function () {
i++;
box.style.backgroundColor = colors[i-1];
// If i value reached to end of an array, then start from beginning.
if (i == colors.length) {
i = 0;
}
}
Add Random Colours from an Array on Click.
To add random colours from an array on click, you can use the following steps:
- Create an array of colours that you want to use.
- In the click event listener, get a random index in the array and set the background colour to the colour at that index.
Here is an example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color | maketechstuff.com</title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
CSS
*{
padding: 0px;
margin:0px;
}
.box{
width: 100%;
height: 100vh;
cursor: pointer;
background-color: pink;
transition: 0.2s;
}
JavaScript
let box = document.querySelector(".box");
// Change random colors on click.
let colors = ["red", "blue", "green", "pink", "violet", "lightblue","yellow","purple","darkblue"];
box.onclick = function () {
let random_number = Math.floor(Math.random() * colors.length);
box.style.backgroundColor = colors[random_number];
}
Here is a color matching game using javascript in which i have used the random colors from array (element colors).
Conclusion.
Changing background colour on click is a simple but powerful technique that can be used to create dynamic and interactive web pages. This tutorial has covered how to change a single colour, multiple colours, and random colours from an array on click.
You may like:
- How to create a dynamic colourfull mouse cursor tail using JavaScript.
- How to create a simple CSS hover effect on button that change the background color with animation using HTML and CSS.
Share your thoughts.