onclick（）から値を取得する方法jqueryを入力するボタン

Question

color pickerを作成しようとしています。色付きのボタンをクリックするたびに、それぞれの色の名前が自動的に入力に送られます。私は白のボタンをクリックした場合、私は入力してもらう：白のように... はここに私のコードは、これまでのところです：

HTML

function changewhite() { 
 
    document.getElementById("color").innerHTML="White"; 
 
} 
 
function changeblack() { 
 
    document.getElementById("color").innerHTML="Black"; 
 
} 
 
function changered() { 
 
    document.getElementById("color").innerHTML="Red"; 
 
} 
 
function changeblue() { 
 
    document.getElementById("color").innerHTML="Blue"; 
 
} 
 
function changeyellow() { 
 
    document.getElementById("color").innerHTML="Yellow"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label>Color:</label> 
 

 
<td width="314"><input name="white" type="button" id="white" onclick="changewhite()" value="" width="20px" /> 
 
<input name="black" type="button" id="black" onclick="changeblack()" value="" width="20px" /> 
 
<input name="red" type="button" id="red" onclick="changered()" value="" width="20px" /> 
 
<input name="blue" type="button" id="blue" onclick="changeblue()" value="" width="20px" /> 
 
<input name="yellow" type="button" id="yellow" onclick="changeyellow()" value="" width="20px" />

NB： I私は<p id="color"> </p>を使っていましたが、コードは完璧に動作していましたが、なぜ入力がないのか分かりません。 .valueない.innerHtmlを使用して、入力値を変更するには

Answer 1

、また、すべての入力

function changeColor(element) { 
 
    document.getElementById("color").value = element.name; 
 
}

input#black { 
 
    background-color: black; 
 
} 
 

 
input#blue { 
 
    background-color: blue; 
 
} 
 

 
input#red { 
 
    background-color: red; 
 
} 
 

 
input#white { 
 
    background-color: white; 
 
} 
 

 
input#yellow { 
 
    background-color: yellow; 
 
}

<input name="white" type="button" id="white" onclick="changeColor(this)" value="" width="20px" /> 
 
<input name="black" type="button" id="black" onclick="changeColor(this)" value="" width="20px" /> 
 
<input name="red" type="button" id="red" onclick="changeColor(this)" value="" width="20px" /> 
 
<input name="blue" type="button" id="blue" onclick="changeColor(this)" value="" width="20px" /> 
 
<input name="yellow" type="button" id="yellow" onclick="changeColor(this)" value="" width="20px" /> 
 
    
 
    
 
<input type="text" id="color" />

Answer 2

に同じ機能を使用する必要がありますので、HTMLを更新した場合、あなたはjqueryのを使用してホープクリックハンドラー

<td width="314"><input name="colourChange" type="button" id="white" value="" width="20px" /> 
<input name="colourChange" type="button" id="black" value="" width="20px" /> 
<input name="colourChange" type="button" id="red" value="" width="20px" /> 
<input name="colourChange" type="button" id="blue" value="" width="20px" /> 
<input name="colourChange" type="button" id="yellow" value="" width="20px" /> 


$("input[name='colourChange']").click(function() { 
var color = this.id; 
console.log(color); 
});