2

Web ページに複数のボタンがあります。しかし、クリックごとに単一のボタンのボタンの色を変更しようとしています。私のコードは以下の通りです。しかし、機能していません....何か助けはありますか？

<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

2

あなたの問題は文字列比較にあります

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

色を設定した後の背景の実際の値は、rgb(255, 0, 0)

rgb() 内のスペースに注意してください

于 2013-09-27T12:26:47.227 に答える
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 に答える