Question

我正在尝试创建prepareForReuse，每当我点击彩色按钮时，相应的颜色名称会自动发送到输入;如果我点击白色按钮我输入：白色等等...... 到目前为止，这是我的代码：

HTML

color picker

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

NB：我想补充一点，在使用输入获取颜色之前，我使用<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" />，代码工作正常，但不知道为什么输入它没有用。

Answer 1

要更改输入值，请使用.value而非.innerHtml，您还应对所有输入使用相同的功能

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

希望您使用jquery，如果是这样，请更新html并单击处理程序

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

如何从onclick（）按钮获取值以输入jquery

2 个答案: