Wechseln der Zellenfarbe basierend auf der aktuellen mit JavaScript

Question

Ich versuche, die Zellfarbe zu ändern, wenn auf eine Schaltfläche geklickt wird. Hier ist mein aktueller Code. (Ich bin sehr neu in diesem und bin nur mit den Dingen rumgespielt)

function changeColor() { 
if(document.getElementById("changeColorId").bgColor = "yellow"){ 
      document.getElementById("changeColorId").bgColor = "green"; 
     } else { 
      document.getElementById("changeColorId").bgColor = "blue"; 
     } 
    } 

Ich bin versucht, die Hintergrundfarbe von ‚changeColorId‘ zu grün zu ändern, wenn die aktuellen Farbe gelb ist (was es tut). Ich möchte aber auch, dass es blau wird, wenn ich erneut auf den Button klicke, wie würde ich das machen?

Answer 1

Syntax

document.getElementById ("changeColorId") bgColor

Die folgende Syntax ist korrekt, um die Farbeigenschaft des Elements zu erhalten.

document.getElementById ("changeColorId"). Style.color

Bitte überprüfen Sie den Code, einfachen Ortscode in HTML-Seite wird es funktionieren.

> <button onclick="changeColor();" >Click me</button> 

> <div id="changeColorId" style="background-color:yellow"> 

> </div> 

 

    
     function changeColor() { 
     var elementStyle = document.getElementById("changeColorId").style; 

     if(elementStyle.backgroundColor == "yellow"){ 
      elementStyle.backgroundColor = "green"; 
      } 
      else if(elementStyle.backgroundColor == "green"){  
       elementStyle.backgroundColor = "blue"; 
      } 
      else { 
      elementStyle.backgroundColor = "yellow"; 
      } 

     } 
    

Answer 2

Für Vergleiche verwenden, um den Gleichheitsoperator==, weil = eine Zuschreibung ist. Siehe Documentation für mehr.

Auch auf dem CSS-Element-Zugriff Sie das style Attribut zugreifen müssen, die von der Unterkunft in Camelcase gefolgt:

document.getElementById ('elementId') .style. Eigenschaft

Ich denke, dass das, was Sie Sie dies erreichen wollen, ist:.

function changeColor() { 
    if(document.getElementById("changeColorId").style.backgroundColor === "yellow"){ 
    document.getElementById("changeColorId").style.backgroundColor = "green"; 
    } else { 
    document.getElementById("changeColorId").style.backgroundColor = "blue"; 
    } 
}