Question

我试图用HTML输入颜色，但我无法获得用户选择的值。这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您尝试通过其ID（即input）选择getElementById()，但该元素没有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" />

Answer 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>

Answer 3

您的代码中出现了一些问题

您创建了一个带有类型按钮的按钮 2.将你的标记与javascript混合起来不是一个好习惯。

检查以下代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在input元素中添加一个带有'colorPicker'值的'id'属性。

好像你试图通过使用'getElementById'来选择输入并且它实际上没有id

HTML无法获取输入颜色值

4 个答案: