In this tutorial, we will learn how to switch background color using JavaScript. This is a useful feature if you want to give your website or web application a dynamic and interactive feel. We will provide step-by-step instructions and a code example to help you implement this functionality on your website.
Step 1: Set up HTML structure
First, create a new HTML file and add the following code to set up the basic structure of the webpage. In this example, we have a button that will trigger the background color change.
<!DOCTYPE html>
<html>
<head>
<title>Switch Background Color</title>
<style>
body {
text-align: center;
padding-top: 100px;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Click the button to switch the background color</h1>
<button id="changeColorBtn">Switch Color</button>
<script src="script.js"></script>
</body>
</html>Step 2: Write JavaScript code
Next, create a new JavaScript file named script.js and add the following code to handle the background color switching functionality.
const colorList = ['#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6'];
let currentIndex = 0;
document.getElementById('changeColorBtn').addEventListener('click', function() {
document.body.style.backgroundColor = colorList[currentIndex];
currentIndex = (currentIndex + 1) % colorList.length;
});In this code, we define an array colorList containing different colors that we want to switch between. We also create a variable currentIndex to keep track of the current index in the color list.
We then add an event listener to the button with the id changeColorBtn. When the button is clicked, the background color of the body element is set to the color at the current index in the colorList array. We then increment the currentIndex by 1 and use the modulus operator to wrap around to the first color when we reach the end of the array.
Step 3: Test the functionality
Save the HTML and JavaScript files in the same directory, and open the HTML file in a web browser. Click the "Switch Color" button to see the background color change between the colors defined in the colorList array.
Congratulations! You have successfully implemented a background color switching functionality using JavaScript. You can customize the colors in the colorList array to match your website’s design scheme and add additional styling to make the feature more visually appealing.
Typing Dots Animation HTML and CSS
https://youtube.com/shorts/fIrmN3dTKk8
A good approach is – set a background root property in the css and update it on the event onchange..
Use onchange
excellent 👌👌
👍
😂😂😂
Excellent 😊
😊
Nice. I ll do code
how did you do that? WOW!!
I never thought you could use javascript to change the color on the background according to your selected option. Completely new thing for me. Such complex mechanism shown with such ease.
Helpful. Not bad.
That code style…
It is not possible to do this with CSS only by :has(), but browser support will still need some time
Nice work! I decided to put the on change in an event listener, and set the style.background to box.value, which seems to work.
I love your videos
how to make a custom color palette with a choice of format, like in photoshop or in figma ?
😮
GG FF 😮😮