2014-11-14 16 views
7

Ich möchte meine Button Farbe jedes Mal ändern, wenn ich darauf klicke. Aber es ändert nur die Farbe beim ersten Klick.Change Button Farbe onClick

Ich glaube, das Problem ist in der setColor Funktion. Jedes Mal, wenn ich auf Button klicke, wird count auf 1 gesetzt. Selbst wenn ich es auf 0 setze, wird es beim nächsten Klick auf 1 zurückgesetzt. Wie behebe ich das? Gibt es globale Variablen in Javascript/HTML, wo dies leicht zu lösen wäre?

<!DOCTYPE html> 
<html> 
<head> 

<script> 
function setColor(btn, color){ 
    var count=1; 
    var property = document.getElementById(btn); 
    if (count == 0){ 
     property.style.backgroundColor = "#FFFFFF" 
     count=1;   
    } 
    else{ 
     property.style.backgroundColor = "#7FFF00" 
     count=0; 
    } 

} 
</script> 
</head> 

<body> 

<input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/> 

</body> 
</html> 
+0

Ja, verschieben var c ount = 1 bis vor der Funktion und es wird global sein. – Bushrod

Antwort

8

Es gibt tatsächlich globale Variablen in Javascript. Sie können mehr über scopes erfahren, die in dieser Situation hilfreich sind.

Ihr Code könnte wie folgt aussehen:

<script> 
    var count = 1; 
    function setColor(btn, color) { 
     var property = document.getElementById(btn); 
     if (count == 0) { 
      property.style.backgroundColor = "#FFFFFF" 
      count = 1;   
     } 
     else { 
      property.style.backgroundColor = "#7FFF00" 
      count = 0; 
     } 
    } 
</script> 

Hoffnung, das hilft.

0

Jedes Mal setColor getroffen wird, Sie setzen count = 1. Sie würden count außerhalb des Geltungsbereichs der Funktion definieren müssen. Beispiel:

var count=1; 
function setColor(btn, color){ 
    var property = document.getElementById(btn); 
    if (count == 0){ 
     property.style.backgroundColor = "#FFFFFF" 
     count=1;   
    } 
    else{ 
     property.style.backgroundColor = "#7FFF00" 
     count=0; 
    } 

} 
5

1.

function setColor(e) { 
    var target = e.target, 
     count = +target.dataset.count; 

    target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF'; 
    target.dataset.count = count === 1 ? 0 : 1; 
    /* 

    () : ? - this is conditional (ternary) operator - equals 

    if (count === 1) { 
     target.style.backgroundColor = "#7FFF00"; 
     target.dataset.count = 0; 
    } else { 
     target.style.backgroundColor = "#FFFFFF"; 
     target.dataset.count = 1; 
    } 
    target.dataset - return all "data attributes" for current element, 
    in the form of object, 
    and you don't need use global variable in order to save the state 0 or 1 
    */ 
} 


<input 
    type="button" 
    id="button" 
    value="button" 
    style="color:white" 
    onclick="setColor(event)"; 
    data-count="1" 
/> 

2.

function setColor(e) { 
    var target = e.target, 
     status = e.target.classList.contains('active'); 

    e.target.classList.add(status ? 'inactive' : 'active'); 
    e.target.classList.remove(status ? 'active' : 'inactive'); 
} 

.active { 
    background-color: #7FFF00; 
} 

.inactive { 
    background-color: #FFFFFF; 
} 

<input 
    type="button" 
    id="button" 
    value="button" 
    style="color:white" 
    onclick="setColor(event)" 
/> 

([conditional (ternary) operator])

Example-1

Example-2