In this tutorial you will know how to change Background Color on Click with JavaScript. This article is also for beginners who know basic JavaScript.
If you are looking for a simple article on How to Change Background Color Using JavaScript then this article is perfect for you. Here I have given complete code, live preview and explanation.
Change Background Color Using JavaScript
Changing the background color on click with JavaScript is a common web development technique that adds interactivity to a webpage.
Adding interactive elements to a website not only improves user engagement but also enhances the overall user experience. One effective way to achieve this is by incorporating dynamic features, such as changing the background color on user interaction.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
Here I have created a basic button in the webpage. When that button is clicked, the background color of the webpage will change randomly. If you want custom color select I shared a more advanced tutorial that you can check out.
In this article, we’ll explore how to Change background color on click using HTML, CSS and JavaScript
Step 1: Create a specific element
First I created a button. You can use any link or text in place of this post. Add this HTML code to your HTML file.
<body>
<button id="btn">Click Me</button>
</body>Step 2: CSS for background color change
You can add some optional CSS to style your elements. This step is not required for the functionality but can enhance the visual appeal. Here I have used below css for button and background design.
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: grid;
place-items: center;
background-color: #000000;
}
button {
font-family: "Poppins", sans-serif;
font-size: 1.4em;
padding: 1em 2em;
border-radius: 2em;
border: 5px solid #ffffff;
background-color: transparent;
color: #ffffff;
letter-spacing: 1.5px;
cursor: pointer;
outline: none;
}Step 3: Change Background Color with JavaScript
Create a JavaScript file and add the following code. This script listens for a click on the button, generates a random color, and changes the background color of the container.
// Get the button element with the id "btn"
const btn = document.getElementById("btn");
// Define a function that returns a random number between 0 and 255 (inclusive)
let randomNum = () => {
return Math.floor(Math.random() * 256);
};
// Define a function to change the background color of the body
let changeColor = () => {
// Generate a random RGB color using the randomNum function
let randomColor = `rgb(${randomNum()}, ${randomNum()}, ${randomNum()})`;
// Set the background color of the body to the generated random color
document.body.style.backgroundColor = randomColor;
};
// Add a click event listener to the button, triggering the changeColor function
btn.addEventListener("click", changeColor);
// Add a load event listener to the window, triggering the changeColor function when the page loads
window.addEventListener("load", changeColor);
By following these steps, you can create a simple and interactive feature on your webpage that changes the background color on a button click.
This is a basic project(button to change background color) , you can change it as you like. Hopefully from this article you have learned how to Change Background Color using HTML CSS and JavaScript.