javascript - 如何从 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" />

注意: 我想补充一点，在使用输入获取颜色之前，我使用的是 <p id="color"> </p> ，代码运行完美，但不知道为什么输入时它不起作用。

Answer 1

要更改输入值，请使用 .value 而不是 .innerHtml ，您还应该对所有输入使用相同的函数

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"  />