Javascript 从输入类型颜色中选中时获取值

我已经写了这段代码，我想通过每次点击输入得到一个值。前两个输入正常工作，但3个输入不正常。我希望3按照这个原则工作：当我点击它时，一个选择颜色的窗口打开，当我选择它时，我在控制台中得到所选颜色的十六进制颜色。请帮帮我。 编辑：正如你在小提琴上看到的那样。我希望它能够选择黑色和白色，并使用输入类型颜色选择一种颜色。我希望输入类型颜色获得与其他输入项一样的帧。另外，你能做些什么来确保当你选择一种颜色时，颜色渐变变为你选择的颜色吗

var radio=document.queryselectoral'input'； fori=0；我不应该这样做：

<input type="color" name="color" id="color3" value="#f90000">

是：

第三个输入是input type=color，而不是input type=radio。我认为输入类型“color”没有“checked”状态color3'也没有值，因此没有可拾取的内容

<input type="radio" name="color" id="color1" value="#000000" checked>
<label for="color1">Black</label>
<input type="radio" name="color" id="color2" value="#fffffff">
<label for="color2">White</label>
<input type="radio" name="color" id="color3" value="#FFC0CB" >
<label for="color3">Pink</label>

---

这可能有助于将其分离，并在最终颜色处使用选择器颜色

如果选择收音机，它也会将该值设置为mastercolor

---

对于最终颜色的用户mastercolor

您只需在输入值更改后获取输入值。 希望这个小片段能有所帮助

[编辑]

添加了问题的代码片段。有工作实例。 您也可以使用for循环，但需要在颜色选择器上使用change，而不是click事件，因为它是在单击发生后更改的

[/编辑]

函数颜色选项{ 让颜色=document.queryselectorallabel； 对于i=0；i但是我想从输入类型color中选择颜色，那么这个输入类型就不需要了；我还没有检查状态。你必须为这个添加一个单独的事件监听器，没有：checked，那么它应该可以工作。我编辑了这个问题，我想现在我清楚我想要实现什么了。非常感谢！你知道如果我点击输入类型的颜色来删除其他输入中的复选框该怎么办吗？我想问另一个问题来更好地说明我的意思：我建议使用另一个输入，而不是必须在第一导语处点击的广播。我编辑了这个问题，我想现在清楚我想要实现什么了。我编辑了这个问题，我想现在我想实现的目标已经很清楚了。好吧，但是我编辑了这个问题，我想现在我想实现的目标已经很清楚了。这很酷，但是如果选中，输入周围没有圆圈来选择颜色：/根据我提供的信息，你应该能够自己找出那个，但是，由于我真的很喜欢这个小挑战，我更新了我的代码，在颜色选择器周围取消勾选并圈出图形。

<input type="radio" name="color" id="color1" value="#000000" checked>
<label for="color1">Black</label>
<input type="radio" name="color" id="color2" value="#fffffff">
<label for="color2">White</label>
<input type="radio" name="color" id="color3" value="#FFC0CB" >
<label for="color3">Pink</label>

var radio = document.querySelectorAll('input');
var masterColor = document.getElementById('color3');
for(i=0;i<radio.length;i++){
  radio[i].addEventListener('click',function(){
    var color = document.querySelector('input:checked').value;
    masterColor.value = color
  });
}

<input type="radio" name="color" id="color1" value="#000000" checked>
<label for="color1">Black</label>
<input type="radio" name="color" id="color2" value="#fffffff">
<label for="color2">White</label>

<input type="color" name="mastercolor" value="#000000" id="color3">
<label for="color3">Pick</labe>