Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 to change the background color
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;
}
</style>
</head>
<body>
<h2>Use the <i>color picker</i> to change a background color via color picker</h2>
<input id = "colorInput" type = "color">
<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
JavaScript contains too many events. We will use the input event to detect the latest event 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 = color.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 addEventListner() method and the style object's backgroundColor property to change the body's background color via color input.
<html>
<body>
<h2>Using the <i>input event</i> to change a background color via color picker</h2>
<input id = "colorInput" type = "color">
<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 setInteral() 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;
}
</style>
</head>
<body>
<h2>Using the <i>setInterval()</i> function to change a background color via color picker.</h2>
<input id = "color" type = "color" value = "fff">
<script>
// Change color after every 100 seconds
setInterval(() => {
let color = document.getElementById('color');
let colorValue = color.value;
document.body.style.backgroundColor = colorValue;
}, 100);
</script>
</body>
</html>
We have learned three approaches in this tutorial to choose a color from the color picker and change the background color of the body according to its value. Users can use the second method, which instantly changes the background color without pressing the button.
However, a third method using the setInterval() function also changes the background color instantly as we pick from a color picker. Still, it invokes after every 100 milliseconds, even if we don’t change the value in the color picker. So, it can reduce the performance of our application.
4K+ Views
