조건부에서 변수 사용이 작동하지 않습니까?

Question

그래서 난 내 HTML에 이들의 10을 가지고

<div class="resultContainer"> 
    <div class="twitchResult" id="charionna"> 
     <a class="link" href="https://www.twitch.tv/charionna"target="_blank"> 
     <h3 class="username">charionna</h3> 
     <p class="streamInfo"></p> 
     </a> 
    </div> 
</div> 

나는 트 API에 요청을 할 때 :

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'https://api.twitch.tv/kraken/streams/comster404/?client_id=mlrx1e94dg7yus5yqm26lwpyxrg9j9x'); 
xhr.onreadystatechange = twitchInfo; 
xhr.send(); 

를 서버 내가이 아닌 200 상태 코드로 응답 응답 핸들러 함수는이 같은 callSuccessChecker 기능을 실행 :이 부분은 잘 작동하고

function twitchInfo() { 


    // request NOT succesful 
    if(this.readyState == 4 && this.status !== 200) { 

    // console.log('This is working'); 

    callSuccessChecker(); 

    } 
} 

.

문제는 callSuccessChecker입니다. 특히, 내가 조건부로 선언 한 변수를 사용합니다. 좋아요 :

function callSuccessChecker() { 

     var containerList = document.getElementsByClassName('resultContainer'); 
     var closedText = document.createTextNode('account closed'); 

     for (i = 0; i < 10; i++) {// <--------not working YET 

      if(containerList[i].style.backgroundColor == 'rgb(245, 209, 107)') { 

      containerList[i].children[0].children[0].children[1].appendChild(closedText); 
      } 
    // console.log (containerList[i].children[0].children[0].children[1]); 
    } 
} 

이 기능을 사용하면 맨 아래 console.log를 주석 처리 한 것을 볼 수 있습니다. 여기 containerList[i]을 사용하면 출력이 콘솔에 표시됩니다.

if 문과 개체 내에서 (함수에서 볼 수있는 것과 동일한) 작업을 수행 할 때 올바른 용어가 무엇이든간에 작동/활성화/잡는 것 같지 않습니다. 이유에

.resultContainer { 
    height: auto; 
    margin-right: 10%; 
    margin-left: 10%; 
    margin-bottom: 0; 
    border-bottom: 1px white solid; 
    background-color: #F5D16B; 
} 

모든 설명 : 여기에

가 backgroundColor로 내가 조건에 대해 확인하기 위해 노력하고있어 컨테이너의 스타일이다 (나는 조건에서의 RGB 동등한에 16 진수 코드를 변환) 이것은?

해제 된 조건부 자체입니까?

도움을 주시면 대단히 감사하겠습니다.

Answer 1

색상 값의 편차의 문제가있을 수 있습니다. 방법에 대해 : console.logs의이 블록은 체인의 오브젝트가 파괴되는 위치를 결정하는 데 도움이해야

function isEqualColor(a, b) { 
    var elementA = document.createElement("div"), 
     elementB = document.createElement("div"); 
    elementA.style.backgroundColor = a; 
    elementB.style.backgroundColor = b; 
    return elementA.style.backgroundColor == elementB.style.backgroundColor; 
} 

function callSuccessChecker() { 
    var containerList = document.getElementsByClassName('resultContainer'); 
    var closedText = document.createTextNode('account closed'); 

    for (i = 0; i < 10; i++) { 
     if(isEqualColor(containerList[i].style.backgroundColor, '#F5D16B')) { 
      containerList[i].children[0].children[0].children[1].appendChild(closedText); 
     } 
     console.log(containerList[i].children[0].children[0].children[1]); 
    } 
} 

Answer 2

:

if(containerList[i].style.backgroundColor == 'rgb(245, 209, 107)') { 
    console.log(containerList[i]); 
    console.log(containerList[i].children[0]); 
    console.log(containerList[i].children[0].children[0]); 
    console.log(containerList[i].children[0].children[0].children[1]); 
    containerList[i].children[0].children[0].children[1].appendChild(closedText); 
} 

비 - 널 (null)이 인쇄 밖으로 모두 다음 appendChild()가 작동해야합니다.

또한과 같이, backgroundColor을 읽는 다른 방법을 시도 할 수 있습니다 :

if(containerList[i].currentStyle['background-color'] == 'rgb(245, 209, 107)') { 
    //... 
}