色入力タイプjavesctiptに応じてシェイプの色を変更します。

Question

私はcolorPickerを使用しており、値を取得して設定します。

私が使用しているこの：

<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"); 
    } 
} 

これはファイルです： http://jsbin.com/mebiriruzi/edit?css,js,output

は、どのように私は、ユーザーのカラー入力を使用していますか？

Answer 1

document.getElementsByName("color")リターン・要素のリストをgetElementsByNameで「S」によって示唆されているように。あなただけdocument.getElementsByName("color")[0].value

と1を持っている場合は、IDを使用して、document.getElementById("color").valueを行うか、「色」の最初のoccuranceを選択することができるように、あなたはどちらかの操作を行います。

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; 
    } 
} 

または

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

次に、js：

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; 
    } 
} 

Answer 2

getElementsByNameメソッドは、名前に一致するすべての要素を含む配列を返します。名前に一致する要素が1つしかない場合でも配列は返されますので、この配列から最初の項目を取得するには、要素0（最初の要素）を指定するために括弧表記を含める必要があります。これはDOMノードを返します、あなたは返された要素のvalueプロパティを取得する必要があります。

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