Javascript 根据颜色输入类型JavesTipt更改形状的颜色

我使用了一个颜色选择器，希望获取值并设置它

我用过这个：

 <li id="color"><input type="color" name="color" onchange="changeColor()"></li>

function changeColor(){
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    for(var i=0; i<len; ++i)
    {
        selectedShapes[i].style.background = document.getElementsByName("color");
    }
}

函数changeColor（）{
var selectedShapes=document.getElementsByClassName（“选定”）；
var len=selectedShapes.length；
对于（var i=0；i方法，
getElementsByName
返回一个数组，其中包含与名称匹配的所有元素。即使只有一个元素与名称匹配，也会返回一个数组，因此要从该数组中获取第一项，您应该在地址元素0（第一项）中包含括号符号。由于这将返回DOM节点，因此需要获取返回元素的
值
属性：

document.getElementsByName("color")[0].value

document.getElementsByName（“color”）
返回getElementsByName中的“s”所建议的元素列表。您可以使用一个id，然后执行
document.getElementById（“color”）.value
或选择“color”的第一个出现，如果只有一个带有
document.getElementsByName（“color”）[0]。value

因此，您可以：

function changeColor(){
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    for(var i=0; i<len; ++i)
    {
        selectedShapes[i].style.background = document.getElementsByName("color")[0].value;
    }
}

函数changeColor（）{
var selectedShapes=document.getElementsByClassName（“选定”）；
var len=selectedShapes.length；
对于（var i=0；iTo设置颜色，首先使用
document.getElementsByName（“颜色”）[0]获取所选颜色值。
<li id="color"><input type="color" id="mySelectedColor" name="color" onchange="changeColor()"></li>

function changeColor(){
    var selectedShapes = document.getElementsByClassName("selected");
    var len = selectedShapes.length;
    for(var i=0; i<len; ++i)
    {
        selectedShapes[i].style.background = document.getElementById("mySelectedColor").value;
    }
}