HTML 无法获取输入颜色值答案

【问题标题】：HTML Cannot Get Input Color ValueHTML 无法获取输入颜色值
【发布时间】：2017-02-24 01:29:38
【问题描述】：

我正在尝试在 HTML 中获取颜色输入，但我无法获取用户选择的值。这是我的代码：

function setColor() {
  alert(document.getElementById("colorPicker").value)
}

<button type="button" onclick="setColor()">Set Color</button>
<input type="color" name="colorPicker" value="#ff0000">

【问题讨论】：

对于初学者来说，您没有 ID 为 colorPicker 的元素
打错了，getElementById 显然需要一个 ID，你不觉得吗？

标签： javascript html html-input

【解决方案1】：

您尝试通过其 ID（即getElementById()）选择 input，但该元素没有 ID，只有名称。更新您的 <input /> 以包含 id 属性，如下所示：

function setColor() 
{
	alert(document.getElementById("colorPicker").value)
}

<button type="button" onclick="setColor()">Set Color</button>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000" />

【讨论】：

【解决方案2】：

没有id为“colorPicker”的元素。您应该改为设置输入 id="colorPicker"

<html>
<head>
<script>
function setColor() {
alert(document.getElementById("colorPicker").value)
}
</script>
</head>
<body bgcolor="#808080">

<button type="button" onclick="setColor()">Set Color</button>
<input type="color" name="colorPicker" id="colorPicker" value="#ff0000">

</body>
</html>

【讨论】：

【解决方案3】：

您的代码中几乎没有错误

您创建了一个按钮类型为 button 2.将您的标记与 javascript 混在一起不是一个好习惯。

检查以下代码sn-p

window.onload=function(){
  var el = document.getElementById("button1");
el.addEventListener("click", setColor);
}
function setColor() {
alert(document.getElementById("colorPicker").value);
}

<body bgcolor="#808080">

<input type="button" id="button1"  value="Set Color"></input>
<input type="color" id="colorPicker" value="#ff0000">
</body>

【讨论】：

【解决方案4】：

向输入元素添加一个带有“colorPicker”值的“id”属性。

似乎您正在尝试使用“getElementById”来选择输入，但它实际上没有 id

【讨论】：

解释为什么会有用
建议添加 id 属性。 name 可用于其他用途。