CODEWITHSUNDEEP
javascripthtmlcoloris
Forever Edits
Forever Edits

Reputation: 45

How can I update the background color of my div or any element by using Color Picker

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

Upvotes: 2

Views: 412

Answers (1)

Anton
Anton

Reputation: 8508

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" />

Upvotes: 1

Related Questions