获取值时：从输入类型颜色检查

Question

我已经编写了这段代码，我想在每次点击输入时获得一个值。前两个输入正常工作，但 3 没有。我想让 3 按照这个原则工作：当我点击它时，会打开一个选择颜色的窗口，当我选择它时，我会在控制台中获得所选颜色的十六进制颜色。请帮我。 编辑：正如您在小提琴中看到的那样。我希望可以选择黑白并使用输入类型颜色选择颜色。我希望输入类型颜色像其他输入项一样获得一个框架。此外，您可以做些什么来确保当您选择一种颜色时，颜色渐变会变为您选择的颜色渐变？

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

input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
label {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin: 2px;
    box-shadow: inset 0 0px 2px 1px rgba(0,0,0,.1);
}
label:nth-child(2) {
    background-color: #000;
}
label:nth-child(4) {
    background-color: #fff;
}
label:nth-child(6) {
    background: conic-gradient(from 90deg,violet,indigo,blue,green,yellow,orange,red,violet);
}
input:checked + label {
    box-shadow: inset 0 0px 2px 1px rgba(0,0,0,.1),
                0 0 0 1px #000;
}

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

Answer 1

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

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

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>

为该用户提供最终颜色的主色

Answer 2

您只需在 input 更改后获取它的值。 希望这个小sn-p有所帮助。

[编辑]

添加了问题的代码 sn-p。带有工作示例。 您也可以使用for 循环，但您需要在颜色选择器上使用change，而不是click 事件，因为它在click 发生后发生了变化。

[/编辑]

function color(option) {

  let colors = document.querySelectorAll("label");
  for (i = 0; i < colors.length; i++) {
    colors[i]
      .style
      .boxShadow = "";
  }

  let color;
  switch (option.type) {
  
    case "click":
      color = option.toElement.value;
      break;
    case "change":
      color = option.target.value;
      document
        .getElementById(option.target.id + "l")
        .style
        .background = color;
      document
        .getElementById(option.target.id + "l")
        .style
        .boxShadow = "inset 0 0px 2px 1px rgba(0,0,0,.1), 0 0 0 1px #000";
      let checked = document.querySelectorAll('input:checked');
      for (i = 0; i < checked.length; i++) {
        checked[i].checked = false;
      }
      break;
  }
  console.log(color);
}

input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
label {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin: 2px;
    box-shadow: inset 0 0px 2px 1px rgba(0,0,0,.1);
}
label:nth-child(2) {
    background-color: #000;
}
label:nth-child(4) {
    background-color: #fff;
}
label:nth-child(6) {
    background: conic-gradient(from 90deg,violet,indigo,blue,green,yellow,orange,red,violet);
}
input:checked + label {
    box-shadow: inset 0 0px 2px 1px rgba(0,0,0,.1),
                0 0 0 1px #000;
}

<input type="radio" name="color" id="color1" onclick="color(event)" value="#000000" checked>
<label for="color1"></label>
<input type="radio" name="color" id="color2" onclick="color(event)" value="#fffffff">
<label for="color2"></label>
<input type="color" name="color" id="color3" onchange="color(event)" value="#abcdef">
<label for="color3" id="color3l"></label>

Answer 3

不应该这样吗：

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

是：

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

Answer 4

您的第三个输入是input type="color"，而不是input type="radio"。我不认为输入类型“颜色”具有“已检查”状态。
'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>