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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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并根据需要使用它。

＆＃13;

<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>

＆＃13;

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

3 个答案: