在Javascript中使用「this」

我想使用vanilla Javascript來更改標籤的顏色，只要使用「this」關鍵字點擊該標籤。該元素以紅色開始。如果在紅色時單擊，則會變爲綠色。如果在綠色時點擊它，則會變爲藍色。如果在藍色時單擊，則會變爲紅色。在Javascript中使用「this」

看起來很簡單，根據我的資源我的代碼應該工作，但事實並非如此。我在這裏錯過了什麼？

這裏是我的javascript：

<script type="text/javascript"> 
    function changeColor(obj) { 

    if (obj.style.backgroundColor=="#ff0000") { 

      obj.style.backgroundColor="#00ff00"; 

     } else if (obj.style.backgroundColor=="#00ff00") { 

      obj.style.backgroundColor="#0000ff"; 

     } else { 

      obj.style.backgroundColor="#ff0000"; 

     } 
    } 
</script>

這是我的HTML：

<a style="background-color: #ff0000;" onclick="changeColor(this)" href="#">Click me</a>

我覺得這個問題是有關的人誰剛開始學習如何使用「this」關鍵字。

謝謝！

來源

2014-05-12 user3276898

@CBroe *不*這個問題的重複。完全一樣。 –

[瞭解如何調試JavaScript]（http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820） –

該問題與this無關，以及與顏色如何存儲在瀏覽器中有關的一切。

顯然，你沒有嘗試基本的調試，因爲alert(obj.style.backgroundColor)將清楚地顯示發生了什麼。

你最好保存自己的財產。例如：

function changeColor(obj) { 
    obj.__color = ((obj.__color || 0)+1)%3; 
    switch(obj.__color) { 
     case 0: obj.style.backgroundColor = "#ff0000"; break; 
     case 1: obj.style.backgroundColor = "#00ff00"; break; 
     case 2: obj.style.backgroundColor = "#0000ff"; break; 
    } 
}

Demo on jsFiddle

來源

2014-05-12 01:32:26

不知道爲什麼這個答案是downvoted。 jsfiddle顯示它的工作完美。 –

他通過檢查'點擊次數'來設置'背景顏色'而不是檢查背景顏色並設置顏色' – jhyap

@jhyap對不起，我錯過了什麼？我認爲這個想法是做一個循環的背景顏色。 –

的問題是，Element.style.backgroundColor返回RGB格式的顏色。此代碼將起作用：

var changeColor = function (obj) { 
    if (obj.style.backgroundColor == "rgb(255, 0, 0)") { 

     obj.style.backgroundColor = "#00ff00"; 

    } else if (obj.style.backgroundColor == "rgb(0, 255, 0)") { 

     obj.style.backgroundColor = "#0000ff"; 

    } else { 

     obj.style.backgroundColor = "#ff0000"; 

    } 
}

但是，請考慮保留您自己對當前顏色的引用。例如：

var colors = ["red", "green", "blue"], ind = 0; 
var changeColor = function (obj) { 
    ind++; 
    ind %= colors.length; 
    obj.style.backgroundColor = colors[ind]; 
}

來源

2014-05-12 01:44:56 soktinpk

當然，假設瀏覽器選擇使用這種格式，而不是其他許多其他格式（十六進制，hsl，rgba，顏色名稱，rgb但帶有任意可變的空格......） –

在Javascript中使用「this」

回答

相關問題