Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to choose a background color through a color picker in JavaScript?
While working with HTML and CSS to create a web page, we require to choose a color from the color picker. Also, sometimes we may require to select the background color through the color picker input.
In this tutorial, we will learn different approaches which allow users to choose a background color from the color-picker input, and when the user selects a new color, it should change the background color.
Using the Color Picker with Button Click
In HTML, color picker input allows users to choose a color from that. We can get a selected color value using the input's value attribute.
Syntax
Users can follow the syntax below to change the background color based on the selected value on the color picker.
document.body.style.backgroundColor = color.value;
We are accessing the document and body style object in the above syntax and changing its 'backgroundColor' property.
Example
In the example below, we have created the input and added the type as color. So, input will work as a color picker. Users can choose any color from the color picker and click the 'change the color' button to invoke the selectColor() function.
The selectColor() function changes the background color of the document body according to the latest value chosen from the color picker.
<html>
<head>
<style>
button {
font-size: 1.2rem;
border-radius: 10px;
margin: 20px;
border: 2px solid blue;
color: red;
padding: 10px 15px;
cursor: pointer;
}
input[type="color"] {
width: 50px;
height: 50px;
border: none;
border-radius: 5px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Use the color picker to change a background color via color picker</h2>
<input id="colorInput" type="color" value="#ffffff">
<button onclick="selectColor()">Change the color</button>
<script>
function selectColor() {
let color = document.getElementById('colorInput');
// changing the background color
document.body.style.backgroundColor = color.value;
}
</script>
</body>
</html>
Using the Input Event (Recommended)
JavaScript contains many events. We will use the input event to detect the latest change in the color picker. We will access the color input via id in JavaScript and invoke the addEventListener() method.
We will pass 'input' as the first parameter of the addEventListener() method and the callback function as a second parameter to change the background color of the body based on the user choosing the color from the color picker.
Syntax
Users can follow the syntax below to use the input event to change the background color via the color picker.
colorInput.addEventListener('input', () => {
document.body.style.backgroundColor = colorInput.value;
})
Example
In this example, we have created the color picker input, which has the "colorInput" id. We have accessed the input element via its id in JavaScript. After that, we used the addEventListener() method and the style object's backgroundColor property to change the body's background color via color input.
<html>
<head>
<style>
input[type="color"] {
width: 60px;
height: 60px;
border: 2px solid #ccc;
border-radius: 10px;
margin: 10px;
cursor: pointer;
}
h2 {
color: #333;
margin: 20px;
}
</style>
</head>
<body>
<h2>Using the input event to change a background color via color picker</h2>
<input id="colorInput" type="color" value="#87CEEB">
<p>Select a color above to instantly change the background!</p>
<script>
let colorInput = document.getElementById('colorInput');
// Whenever the user changes the color, the input event will be called.
colorInput.addEventListener('input', () => {
document.body.style.backgroundColor = colorInput.value;
});
</script>
</body>
</html>
Using the setInterval() Function
The setInterval() function allows us to invoke a particular function after a particular interval. It takes a callback function as the first parameter and a time interval in milliseconds as the second parameter.
The setInterval() function invokes the callback function after some time. Here, we will change the value of the background color according to the color value in the color picker in the callback function.
Syntax
Users can follow the syntax below to use the setInterval() function to choose a background color from the color picker.
setInterval(() => {
document.body.style.backgroundColor = colorValue;
}, 100);
In the above syntax, colorValue is the color value we get from the color picker.
Example
In the example below, the arrow function passed as a parameter of the setInterval() function will be called after every 100 milliseconds. In the arrow function, we access the color input via id, get its color value using the value attribute, and assign it to the 'backgroundColor' property of the style object.
Users can see in the output that as they change the color in the color picker, it will instantly reflect as a background color of the document body.
<html>
<head>
<style>
body {
color: white;
font-family: Arial, sans-serif;
}
input[type="color"] {
width: 50px;
height: 50px;
border: 2px solid white;
border-radius: 5px;
margin: 10px;
}
h2 {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h2>Using the setInterval() function to change a background color via color picker</h2>
<input id="color" type="color" value="#FF6B6B">
<p>Note: This method checks for changes every 100ms.</p>
<script>
// Change color after every 100 milliseconds
setInterval(() => {
let color = document.getElementById('color');
let colorValue = color.value;
document.body.style.backgroundColor = colorValue;
}, 100);
</script>
</body>
</html>
Comparison of Methods
| Method | Instant Update | Performance | User Interaction |
|---|---|---|---|
| Button Click | No | Best | Manual button click required |
| Input Event | Yes | Excellent | Automatic on color change |
| setInterval() | Yes | Poor | Continuous checking |
Conclusion
The input event method is the recommended approach as it provides instant background color changes with optimal performance. Avoid setInterval() as it continuously runs even when no changes occur, potentially affecting application performance.
4K+ Views
