HTML 无法获取输入颜色值
Posted
技术标签:
【中文标题】HTML 无法获取输入颜色值【英文标题】：HTML Cannot Get Input Color Value 【发布时间】：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，你不觉得吗？
【参考方案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 可用于其他用途。以上是关于HTML 无法获取输入颜色值的主要内容，如果未能解决你的问题，请参考以下文章