divをバックグラウンドの色でオンクリックするとJavaScriptがオンになる

Question

divをクリックしたときのdivの現在の色に応じて、divの背景色を別の色に変更しようとしています。次のコードは動作しません。私は "if"ステートメントと何か関係があると考えました。なぜなら、 "if"ステートメントを使わずに1色に変更するだけで正常に動作するからです。

<script language="JavaScript"> 
function setColor(blockId) { 
    if (document.getElementById(blockId).style.background == '#FF0000') { 
     document.getElementById(blockId).style.background = '#0000FF'; 
    }else if (document.getElementById(blockId).style.background == '#0000FF') { 
     document.getElementById(blockId).style.background = '#999999'; 
    }else if (document.getElementById(blockId).style.background == '#999999') { 
     document.getElementById(blockId).style.background = '#FF0000'; 
    } 
} 
</script> 

<div id="b1" style="background-color:#FF0000; height:100px; width:100px;" onClick="setColor('b1')"></div> 

Answer 1

ある

識別するためのインデックスをインクリメント背景のリストから使用している背景。そのインデックスを要素のプロパティとして格納することができます。

var backgrounds = ["#0000FF", "#999999", "#FF0000"]; 
function setColor(el) { 
    el.colorIdx = el.colorIdx || 0; 
    el.style.backgroundColor = backgrounds[el.colorIdx++ % backgrounds.length]; 
} 

はまた、むしろdocument.getElementById()を経由して、その要素に検索を行うよりも、ちょうどonclickハンドラからthisを渡し、そしてあなたの関数は、要素自体への参照を持っています。

<div onclick="setColor(this)"></div> 

の作業のデモ：http://jsfiddle.net/gilly3/vPMPb/

Answer 2

おそらくあなたのロジックではありません。プロパティが指定されたDOM要素ノードのスタイル属性に存在しない限り、プレゼンテーションプロパティはDOMから推論できません。静的HTMLのスタイル属性を使用して、ターゲットHTMLタグに背景色を指定します。今あなたのJavaScriptと背景色のプロパティを検出し、設計どおりに実行します。

Answer 3

問題は、ブラウザでstyle.backgroundのプロパティがどのように理解されているかが不一致であるために発生しています。いくつかのブラウザではstyle.backgroundColor（style.backgroundbtwの代わりにこれを使用する）は "＃FF0000"となり、他のブラウザでは "＃ff000"となり、他のブラウザでは "rgb（255,0,0）"となります。文字列をチェックすることはできません。代わりに色の値を配列に格納し、グローバルな位置変数を保持することをお勧めします。 divをクリックするたびに、索引を作成して配列を使用します。これと同様：

Demo | Source

<script language="JavaScript"> 
    var colors = ["#FF0000","#0000FF","#999999"]; 
    var idx = 0; 

function setColor(blockId) { 
    document.getElementById(blockId).style.backgroundColor = colors[++idx%3]; 
} 
</script> 

<div id="b1" style="background-color:#FF0000; height:100px; width:100px;" onClick="setColor('b1')"></div> 

EDIT：ところで、++idx%3がちょうど++idx（評価前インクリメント）及び%3（ "3で割った値の余り" のモジュロ3）