Использование выражения «If» для получения значения цветного текста в Javascript

Question

Я пытаюсь сделать то, что, когда вы нажимаете кнопку, текст станет зеленым, и если вы нажмете его снова, текст будет синий. Моя стратегия в этом было проверить, если текст был зеленым, или если он был синим, но я не знаю, как:

var topcon = document.getElementsByClassName("topchoice"); 

function show() { 
    if(topcon.style.color = "blue") { 
     for (count=0; count < topcon.length; count++) { 
     topcon[count].style.color = "green"; 
     } 
    } 
    else if(topcon.style.color = "green") { 
     for (count=0; count < topcon.length; count++) { 
      topcon[count].style.color = "blue"; 
     } 
    } 
} 

Однако, это не работает. Он будет оставаться одним и тем же цветом, когда я вызываю функцию show(). Кто-нибудь знает, почему это не работает?

И если вам интересно, почему я использовал цикл, это потому, что вы не можете getElementsByClassName без массива, потому что элементы работают с массивами.

Answer 1

Есть 2 номер в коде

• нужно использовать оператор сравнения == или === для сравнения
• topcon является список узлов, поэтому он не имеет style свойства. Это заставит ваш код выдаст ошибку, как Uncaught TypeError: Cannot set property 'color' of undefined

var topcon = document.getElementsByClassName("topchoice"); 
 

 
function show() { 
 
    var el; 
 
    for (count = 0; count < topcon.length; count++) { 
 
    el = topcon[count]; 
 
    if (el.style.color == "blue") { 
 
     el.style.color = "green"; 
 
    } else if (el.style.color == "green") { 
 
     el.style.color = "blue"; 
 
    } 
 
    } 
 
}

<div class="topchoice" style="color: green">1</div> 
 
<div class="topchoice" style="color: green">1</div> 
 
<div class="topchoice" style="color: green">1</div> 
 
<div class="topchoice" style="color: green">1</div> 
 

 
<button onclick="show()">Show</button>

Answer 2

Необходимо использовать оператор сравнения «===», а не оператор присваивания «=». Это также немного сбивает с толку, поскольку похоже, что вы ожидаете, что topcon будет массивом элементов, и в этом случае вам нужно также изменить свое сравнение на элемент в том, что было выбрано.

var topcon = document.getElementsByClassName("topchoice"); 

function show() { 
    var changeColor = "blue"; 
    if(topcon && topcon.length) { 
    if(topcon[0].style.color === "blue") { 
     changeColor = "green"; 
    } else { 
     changeColor = "blue"; 
    } 
    for (count=0; count < topcon.length; count++) { 
     topcon[count].style.color = changeColor; 
    } 
    } 
};