2

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

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

4

4 回答 4

4

This is working code. Your code is having error. No script tag, not valid if statement. Use this code it is working one.

<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>
于 2013-09-27T12:25:56.297 回答
2

您的问题在于字符串比较

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

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

小心 rgb() 中的空格

于 2013-09-27T12:26:47.227 回答
1

您在编写代码时出现语法错误。将此代码放在脚本标记中。

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

希望这能解决您的问题。

谢谢你。

于 2013-09-27T12:23:07.560 回答
0

主要问题只是您需要包含空格的比较。我的示例传入了按钮，这样您就不需要通过 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';
}
}
于 2013-09-27T12:33:56.303 回答