CODEWITHSUNDEEP
javascripthtmljquerycsscolor-picker
Nitin Saini
Nitin Saini

Reputation: 546

How to change background color using color picker without click on button?

I want to change the background color using colorpicker without a click on changecolor button. What I want is to change the background color as I am selecting RGB in colorpicker.

function changecolor(){
  let color = document.getElementById('colorpicker').value;
  document.body.style.backgroundColor = color;
  
}
<input id = "colorpicker" type = "color">
  <button onclick = "changecolor();"> change Color </button>

Upvotes: 4

Views: 6681

Answers (3)

PRAFULL PATEL
PRAFULL PATEL

Reputation: 71

Use this.

let colorpicker = document.getElementById('colorpicker');



  setInterval(()=>{
      let color = colorpicker.value;
      document.body.style.backgroundColor = color;
  }, 200);
  <input id = "colorpicker" type = "color" value="#ffffff">
    <button onclick = "changecolor();"> change Color </button>

Upvotes: 3

Amar Srivastava
Amar Srivastava

Reputation: 373

document.getElementById("colorpicker").addEventListener("change", function() {
  document.body.style.backgroundColor = this.value;
});
<input id = "colorpicker" type = "color">

Upvotes: 1

Swati
Swati

Reputation: 28522

You can add onchange event on your colorpicker so that your function will get called and then simply change your background color .

Demo Code :

function changecolor(el) {
  document.body.style.backgroundColor = el.value;
}
<input id="colorpicker" type="color" onchange="changecolor(this)">

Upvotes: 2

Related Questions