この基本的なJavaScriptコードの問題点は何ですか？

Question

私は、段落の背景を黄色に変更し、次にクリックするとピンクに変更する基本的なJavaScriptを作成しようとしています。

<p id="foo">Hello, people!</p> 

、スクリプト最初のクリックで黄色に

window.onload = function(){ 
var foo = document.getElementById("foo"); 
foo.onclick = function(){ 
     if(foo.style.background!=="yellow")foo.style.background = "yellow"; 
     if(foo.style.background === "yellow") foo.style.background = "pink"; 
}; 
}; 

色の変化であるが、私はもう一度クリックしたときには、ピンク色にない変更を行います。私は問題を理解することはできません。

Answer 1

EDITに

if(foo.style.background === "yellow") 

を変更してみてください：backgroundを使用しないでください、使用backgroundColor

Fixed example

if(foo.style.background!=="yellow")foo.style.background = "yellow"; 
    if(foo.style.background === "yellow") foo.style.background = "pink"; 

if(foo.style.background!=="yellow")foo.style.background = "yellow"; 
    else if(foo.style.background === "yellow") foo.style.background = "pink"; 

あなたが黄色に変更するので、それが黄色だかどうかをチェックし、それはあなたがあなたの比較をやっている方法が原因かもしれませんそれピンク

Answer 2

この

if(foo.style.background == "yellow") 

Answer 3

作る：すべき人のニーズ

foo.onclick = function(){ 
     if(foo.style.background != "yellow") foo.style.background = "yellow"; 
     if(foo.style.background == "yellow") foo.style.background = "pink"; 
};

"！=="と "==="の代わりに "！="と "=="を使用することに注意してください。

Answer 4

試してみてください。

var foo = document.getElementById("foo"); 
foo.onclick = function(){ 
     if(foo.style.background!="yellow")foo.style.background = "yellow"; 
     else if(foo.style.background =="yellow") foo.style.background = "pink"; 
}; 

http://jsfiddle.net/AvKPE/

var foo = document.getElementById("foo"); 
foo.onclick = function(){ 
     if(foo.style.backgroundColor!="yellow")foo.style.backgroundColor = "yellow"; 
     else if(foo.style.backgroundColor =="yellow") foo.style.backgroundColor = "pink"; 
}; 

http://jsfiddle.net/AvKPE/2/