Question

我在上面的html代码用于我的项目..但我不知道如何使用javascript获取上述输入的值

<form>
  <input type="color" id="favcolor">
</form>

有人可以帮助我吗？

谢谢

Answer 1

简单地获取值

document.getElementById("favcolor").value;

如果要在选择更改时获取颜色，可以添加事件侦听器。你会做这样的事情

   var theInput = document.getElementById("favcolor");
   var theColor = theInput.value;
   theInput.addEventListener("input", function() {

   <<Do something with theColor value here>>

    }, false);

以下是一个有效的例子：http://jsfiddle.net/3fehj/

Answer 2

我们可以简单地将颜色值分配给标签。

示例代码在这里

<label id ="colorVal">Select color</label>
<input type="color" id ='color'>Value</input>

JS代码

let colorInput = document.getElementById('color');


colorInput.addEventListener('input', () =>{
document.getElementById('colorVal').innerHTML = colorInput.value;
});

示例代码笔链接

https://codepen.io/ragi_jay/pen/poRMwMX

如何使用javascript获取type =“color”输入的值

2 个答案: