Geçerli olana göre hücre rengini değiştirme javascript

Question

Düğme tıklandığında hücre rengini değiştirmeye çalışıyorum. İşte şu anki kodum. (Ben buna çok yeni ve sadece şeyler ile karıştırmasını ediyorum) Ben yeşil 'changeColorId' arka plan rengini değiştirmek için çalışılıyor

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

akım rengi sarı ise (o yapar ki). Bununla birlikte, düğmeyi tekrar tıklatırsam maviye dönüşmesini de isterim, bunu nasıl yapacağım? = bir ilişkilendirme çünkü karşılaştırmalar için

Answer 1

dizimi

document.getElementById ("changeColorId") bgColor

Aşağıda, öğenin renk özelliğini almak için doğru sözdizimi verilmiştir.

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

kodu, işe yarayacak html sayfası içinde basit bir yer kodunu kontrol edin.

> <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

, eşitlik operatörü== kullanın. Daha fazla bilgi için bkz. Documentation. Ayrıca

, CamelCase mülkiyet ardından size style niteliğini erişmek zorunda elementin css erişmek için:

document.getElementById ('elementID') .Style. mülkiyet

Ben ne ulaşmak istediğiniz bu olduğunu düşünüyorum.

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