当我用type=" color“从我的输入中选择一种颜色时，如何改变我身体的背景？

Question

我曾尝试添加一个onclick事件，当单击该事件时，它会将背景更改为我的输入字段中设置的任何内容，但它不起作用。我不知道我是否使用了错误的事件，或者是其他事件。有没有人能帮帮我谢谢。

​

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

几个问题

应该使用

• change事件而不是 be document.body来选择颜色选择器的值

Answer 2

1. 事件"input“非常适合您的意图。
2. 您将元素传递给了colorPicker函数，因此必须使用元素的值，而不是元素的值是正确的，而不仅仅是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

您可以通过将所有addEventListener函数放在一行中来简化这一过程(使用箭头=>函数，并使用onChange事件，而不是onClick。然后，您希望返回color.value，而不是输入元素color本身。最后，您希望使用document.body，而不是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>

​