查找 Javascript 中颜色输入输入的值

Question

我正在尝试编写一个非常简单的颜色选择器，但我一直坚持如何获取用户在javascript中选择的颜色的值。这是我的代码：

<input type="color" value="#ff0000">
<script>
const input = document.querySelector("input")
input.addEventListener("change")
const color = e.target.value;
console.log(rgb);
</script>

提前感谢！

Answer 1

你必须添加一个处理程序函数，你必须在其中获取颜色：

const input = document.querySelector("input")
input.addEventListener("change", function(event){
const color = event.target.value;
console.log(color);
});

<input type="color" value="#ff0000">

Answer 2

你会得到这样的颜色值

<input type="color" id="myColor" value="#ff0000">
var colorval = document.getElementById("myColor").value;

Answer 3

您的代码存在几个问题。

首先，我会在您的输入中添加一个id属性并使用getElementById()。

您还需要将 2 个参数传递给addEventListener，第一个是关于要触发的事件(这里在change(，第二个是该事件发生时将运行的函数。该函数采用参数e(事件(，您可以从中访问e.target.value并根据需要使用它。

<input id="color-picker" type="color" value="#ff0000">
<script>
const input = document.getElementById("color-picker")
input.addEventListener("change", function(e) {
const color = e.target.value;
console.log(color);
});
</script>