从输入中选择颜色后，如何使此按钮更改背景颜色？

Question

How can I make this button change the background color after selecting color from the input??

 var theInput = document.getElementById("favColor"); var body = document.querySelector("body"); var theColor = theInput.value; theInput.addEventListener("change", function() { body.style.background = theInput.value; }, false); 

 <form> <input type="color" name="colorChange" value="" id="favColor"> <button id="changeColor">Click me</button> </form> 

Answer 1

You should attach a click event to the button changeColor then perform the color change inside this event, like :

  var button = document.querySelector("#changeColor");

  button.addEventListener("click", function() {
    body.style.background = theInput.value;
  }, false);

NOTE : A button inside form is by default a submit button, so you should add type='button' :

<button id="changeColor" type="button">Click me</button>

Or e.preventDefault() :

button.addEventListener("click", function(e) {
    e.preventDefault()

    body.style.background = theInput.value;
}, false);

To prevent the form submit and page refresh after the click.

Hope this helps.

Working snippet :

 var theInput = document.getElementById("favColor"); var body = document.querySelector("body"); var button = document.querySelector("#changeColor"); button.addEventListener("click", function() { body.style.background = theInput.value; }, false); 

 <form> <input type="color" name="colorChange" value="" id="favColor"> <button id="changeColor" type="button">Click me</button> </form> 

Answer 2

If you want the color of the button to change as soon as the user types the color in, change the event listener from change to keyUp like such:

 <form> <input type="color" name="colorChange" value="" id="favColor"> <button id="changeColor">Click me</button> </form> <script type="text/javascript"> var theInput = document.getElementById("favColor"); var body = document.querySelector("body"); var theColor = theInput.value; theInput.addEventListener("keyup", function() { document.getElementById("changeColor").style.background = theInput.value; }, false); </script> 

Answer 3

 var theInput = document.getElementById("favColor"); var body = document.querySelector("body"); var theColor = theInput.value; function changeColor() { body.style.background = theInput.value; } 

 <input type="color" name="colorChange" value="" id="favColor"> <button id="changeColor" onclick="changeColor()">Click me</button>