我有三个按钮。我希望它们在按下时改变颜色，并在再次按下时恢复为无颜色。
我在 stackoverflow 上找到了这段代码，它几乎可以让我做到这一点，但是它只适用于一个按钮，其他两个不受影响。
另外，当我按下另外两个按钮中的一个时，第一个按钮会改变颜色。我尝试更改按钮上的 ID，添加另一个具有不同的脚本getElementById()身份证有，但没有任何作用。
我是否需要多个功能才能实现我想要的功能？
我正在使用的代码如下。
var count = 1;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#FFFFFF";
count = 1;
} else {
property.style.backgroundColor = "#E68352";
count = 0;
}
}
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
<input type="button" id="button" value = "A-D" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
<input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
</body>
通常，当您编写内联事件处理程序时，您可以利用：
-
this https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this：当前元素：当从内联事件处理程序调用代码时，其 this 将设置为放置侦听器的 DOM 元素：
-
event https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers: 事件元素对象
因此，改变：
onclick="setColor('button', '#101010')"
with:
onclick="setColor(this, event, '#101010')"
所以你的代码可以重写为：
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? 'rgb(' +
parseInt(result[1], 16) + ', ' +
parseInt(result[2], 16) + ', ' +
parseInt(result[3], 16) + ')'
: null;
}
function setColor(btnEle, evt, color) {
if (btnEle.style.backgroundColor == hexToRgb("#E68352")) {
btnEle.style.backgroundColor = "#FFFFFF"
}
else {
btnEle.style.backgroundColor = "#E68352"
}
}
<input type="button" id="button1" value = "A-D" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button2" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button3" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
