Question

我在网页上有多个按钮。但尝试在每次点击时更改单个按钮的按钮颜色。我的代码如下。但不工作......有什么帮助吗？

<html>
<head>
<script type="text/javascript">
function toggleColor(id) {
if(document.getElementById(id).style.background !== 'rgb(255,0,0)') {
    document.getElementById(id).style.background = '#FF0000';

}
else  {
    document.getElementById(id).style.background = '#00FF00';
}
}
</script>
</head>
<body>
<button type="button" id="1" style="background-color:#00FF00;"  onclick="toggleColor(this.id)">1</button>
</body>

Answer 1

这是有效的代码。您的代码有错误。没有脚本标记，if语句无效。使用此代码正在运行。

<html>
<head>
<script>
window.toggle = true;
function toggleColor(id) {
console.log(document.getElementById(id).style.background);
console.log(document.getElementById(id).style.background.indexOf('rgb(0, 255, 0)'));
if(document.getElementById(id).style.background.indexOf('rgb(0, 255, 0)')>0)
    document.getElementById(id).style.background = '#FF0000';
else if(document.getElementById(id).style.background.indexOf('rgb(255, 0, 0)')>0)
    document.getElementById(id).style.background = '#00FF00';
}
</script>
</head>
<body>
<button type="button" id="1" style="background:#00FF00;"  onclick="toggleColor(this.id)">1</button>
</body>

Answer 2

您的问题代表字符串比较

if(document.getElementById(id).style.background !== 'rgb(255,0,0)')

在设置背景颜色后，背景的实际值为rgb(255, 0, 0)

小心rgb（）

中的空格

Answer 3

编写代码时出现语法错误。将此代码放入其中脚本标签。

 <script>
 function toggleColor(id) {
 if(document.getElementById(id).style.background !== 'rgb(255,0,0)') {
    document.getElementById(id).style.background = '#FF0000';

 }
 else  {
    document.getElementById(id).style.background = '#00FF00';
  }
 }
 </script>

希望这可以解决您的问题。

谢谢。

Answer 4

主要问题是你需要比较空间。我的示例传递了按钮，因此您无需再通过ID获取元素。

示例JSBIN

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <button type="button" id="1" style="background-color:#00FF00;"  onclick="toggleColor(this)">1</button>
</body>
</html>

JavaScript的：

function toggleColor(el) {
if(el.style.background == 'rgb(0, 255, 0)') {
    el.style.background = '#FF0000';
}
else  {
    el.style.background = '#00FF00';
}
}

按钮颜色在多个按钮的切换时不会改变

4 个答案: