I'm using ([mdbassit/Coloris][1]) as my website's color picker. I'm trying to change any div or elements color by using that color picker using JavaScript but it's not working.
I thing the problem is with my JavaScript Code.
My Code:
Coloris({
// The default behavior is to append the color picker's dialog to the end of the document's
// body. but it is possible to append it to a custom parent instead. This is especially useful
// if the color fields are in a scrollable container and you want color picker' dialog to stay
// anchored to them. You will need to set the position of the container to relative or absolute.
// Note: This should be a scrollable container with enough space to display the picker.
parent: '.container',
// A custom selector to bind the color picker to. This must point to input fields.
el: '.color-field',
// The bound input fields are wrapped in a div that adds a thumbnail showing the current color
// and a button to open the color picker (for accessibility only). If you wish to keep your
// fields unaltered, set this to false, in which case you will lose the color thumbnail and
// the accessible button (not recommended).
wrap: true,
// Available themes: default, large, polaroid.
// More themes might be added in the future.
theme: 'default',
// Set the theme to light or dark mode:
// * light: light mode (default).
// * dark: dark mode.
// * auto: automatically enables dark mode when the user prefers a dark color scheme.
themeMode: 'light',
// The margin in pixels between the input fields and the color picker's dialog.
margin: 2,
// Set the preferred color string format:
// * hex: outputs #RRGGBB or #RRGGBBAA (default).
// * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A).
// * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A).
// * auto: guesses the format from the active input field. Defaults to hex if it fails.
// * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A).
format: 'hex',
// Set to true to enable format toggle buttons in the color picker dialog.
// This will also force the format (above) to auto.
formatToggle: true,
// Enable or disable alpha support.
// When disabled, it will strip the alpha value from the existing color value in all formats.
alpha: true,
// Show an optional clear button and set its label
clearButton: {
show: true,
label: 'Done'
},
// An array of the desired color swatches to display. If omitted or the array is empty,
// the color swatches will be disabled.
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'rgb(244,162,97)',
'#e76f51',
'#d62828',
'navy',
'#07b',
'#0096c7',
'#00b4d880',
'rgba(0,119,182,0.8)'
]
});
var inputBox = document.getElementById('colorBackground');
inputBox.onkeyup = function(){
document.body.style.backgroundColor = inputBox.value;
}body{
background-color: black;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input class="color-field" type='text' id='colorBackground'>
</body>Please tell me the correct JavaScript code, by which I can change the background color or any color property of any element or div.
Thank You [1]: https://github.com/mdbassit/Coloris
If i understood your problem correctly, to fix this you need to use the addEventListener method and get the value from the target directly.
const inputBox = document.getElementById('colorBackground');
inputBox.addEventListener('change', ev => {
document.body.style.backgroundColor = ev.target.value;
});
inputBox.addEventListener('keyup', ev => {
document.body.style.backgroundColor = ev.target.value;
});
// inputBox.onkeyup = function () {
// document.body.style.backgroundColor = inputBox.value;
// };
Coloris({
// The default behavior is to append the color picker's dialog to the end of the document's
// body. but it is possible to append it to a custom parent instead. This is especially useful
// if the color fields are in a scrollable container and you want color picker' dialog to stay
// anchored to them. You will need to set the position of the container to relative or absolute.
// Note: This should be a scrollable container with enough space to display the picker.
parent: '.container',
// A custom selector to bind the color picker to. This must point to input fields.
el: '.color-field',
// The bound input fields are wrapped in a div that adds a thumbnail showing the current color
// and a button to open the color picker (for accessibility only). If you wish to keep your
// fields unaltered, set this to false, in which case you will lose the color thumbnail and
// the accessible button (not recommended).
wrap: true,
// Available themes: default, large, polaroid.
// More themes might be added in the future.
theme: 'default',
// Set the theme to light or dark mode:
// * light: light mode (default).
// * dark: dark mode.
// * auto: automatically enables dark mode when the user prefers a dark color scheme.
themeMode: 'light',
// The margin in pixels between the input fields and the color picker's dialog.
margin: 2,
// Set the preferred color string format:
// * hex: outputs #RRGGBB or #RRGGBBAA (default).
// * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A).
// * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A).
// * auto: guesses the format from the active input field. Defaults to hex if it fails.
// * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A).
format: 'hex',
// Set to true to enable format toggle buttons in the color picker dialog.
// This will also force the format (above) to auto.
formatToggle: true,
// Enable or disable alpha support.
// When disabled, it will strip the alpha value from the existing color value in all formats.
alpha: true,
// Show an optional clear button and set its label
clearButton: {
show: true,
label: 'Done',
},
// An array of the desired color swatches to display. If omitted or the array is empty,
// the color swatches will be disabled.
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'rgb(244,162,97)',
'#e76f51',
'#d62828',
'navy',
'#07b',
'#0096c7',
'#00b4d880',
'rgba(0,119,182,0.8)',
],
});
const inputBox = document.getElementById('colorBackground');
inputBox.addEventListener('change', ev => {
document.body.style.backgroundColor = ev.target.value;
});
inputBox.addEventListener('keyup', ev => {
document.body.style.backgroundColor = ev.target.value;
});
// inputBox.onkeyup = function () {
// document.body.style.backgroundColor = inputBox.value;
// };body {
background-color: black;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<br /><br /><br /><br /><br /><br /><br />
<input class="color-field" type="text" id="colorBackground" />