使用 type=“color” 从输入中选择颜色时如何更改身体的背景

Question

I have tried adding a onclick event that when clicked changes the background to whatever is set in my input field but it did not work. I do not know if I am using a wrong event or if it is something else. Can someone please help me thank you.

 let color = document.getElementById("color-picker"); color.addEventListener("click", function() {colorPicker(color)}); function colorPicker(chooseColor) { body.style.backgroundColor = chooseColor }

 <fieldset> <legend>Appearing here</legend> <div> <label for="color-picker">Colors</label> </div> <div> <input type="color" id="color-picker"> </div> </fieldset>

Answer 1

A few issues

1. the change event should be used instead of click
2. should be document.body instead of body
3. should use chooseColor.value to pick the value of the color picker

Answer 2

1. event "input" would be much suitable for your intent.
2. you passed the element to the colorPicker function so element's value has to be used , not element itself.
3. document.body is correct, not just only body

 let color = document.getElementById("color-picker"); color.addEventListener("input", function() {colorPicker(color)}); function colorPicker(chooseColor) { document.body.style.backgroundColor = chooseColor.value; }

 <fieldset> <legend>Appearing here</legend> <div> <label for="color-picker">Colors</label> </div> <div> <input type="color" id="color-picker"> </div> </fieldset>

Answer 3

You can simplify this by putting the addEventListener function all on one line (using an arrow => function, and using an onChange event, not onClick . Then you want to return color.value , not the input element color itself. Finally, you want to use document.body , not body :

 let color = document.getElementById("color-picker") color.addEventListener("change",() => document.body.style.backgroundColor = color.value)

 <fieldset> <legend>Appearing here</legend> <div> <label for="color-picker">Colors</label> </div> <div> <input type="color" id="color-picker"> </div> </fieldset>