這個基本的JavaScript代碼有什麼問題？

我正在嘗試編寫基本的JavaScript，將段落的背景更改爲黃色，然後再點擊粉紅色。這個基本的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"; 
}; 
};

顏色變爲黃色首先點擊，但它確實不變化到粉紅色，當我再次點擊。我無法弄清楚這個問題。

來源

2011-10-25 Jatin

這是什麼都與jQuery做？ – BoltClock

最簡單的方法是在onclick函數中粘貼警報（foo.style.background）或console.log（foo.style.background），以查看每次的值。 – Tom

在內部，瀏覽器可能使用與字符串「黃色」不同的表示來表示背景。 'console.log（foo.style.background）'來看看它實際是什麼。 –

編輯：不要使用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";

，因爲你將其更改爲黃色，然後檢查，如果它是黃色，使之粉紅色

來源

2011-10-25 17:55:28 Joe

嗯，這裏有更多的理由使用花括號，換行符和if/else塊的縮進。 – BoltClock

不，即使使用「其他」也不起作用。另外，即使沒有別的，它應該做同樣的事情。 – Jatin

@Jatin：不，不應該。如果有的話，你需要添加'else'並保持它。 – BoltClock

嘗試改變

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

這個

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

來源

2011-10-25 17:55:22 Sparky

@IAbstractDownvoteFactor在那裏發現了真正的問題 – Matias

它可能是由於你做你的比較方式：

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

請注意使用「！=」和「==」而不是「！==」和「===」。

來源

2011-10-25 17:56:52 Mun

我做了這些改變，但它仍然無法正常工作。 – Jatin

嘗試：

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/

來源

2011-10-25 17:58:56 andlrc

它適用於Chrome，但不適用於Firefox。 – Jatin

好的問題是，Firefox返回整個背景屬性：0％0％固定...黃色...嘗試新的鏈接：http://jsfiddle.net/AvKPE/2/ – andlrc

這個基本的JavaScript代碼有什麼問題？

回答

相關問題