"If 문"을 사용하여 자바 스크립트에서 색상이 지정된 텍스트의 값을 얻습니다.

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

은, 코드

• 비교
• topcon에 대한 비교 연산자 == 또는 ===을 사용할 필요가 노드 목록입니다 2 문제가 있습니다. 이것은`=`당신이 원하는 당신이 그것을 할당하는 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이 항목 배열이 될 것으로 예상하는 것처럼 보이기 때문에 다소 혼란 스럽습니다.이 경우 선택된 항목의 요소와 비교를 변경해야합니다. 는 style 속성을하지 않도록

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