有条件的情况下可变使用不起作用？

Question

So I have 10 of these in my HTML:

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

When I make an request to the Twitch API:

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

and the server responds with a non-200 status code I have the response handler function run the callSuccessChecker function like this:

function twitchInfo() {


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

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

     callSuccessChecker();

     }
}

This part is working just fine.

It's the callSuccessChecker that's an issue. Specifically, using a variable that's I declared in it in a conditional. Like so:

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

In this function you can see I have commented out a console.log at the bottom. When I use containerList[i] here, it shows me the output in the console.

But when I do the same thing (as is visible in the function) inside the if statement and object, it doesn't seem to work/activate/grab it/whatever the correct term for that is.

Here are the styles for the container whose backgroundColor I'm trying to check against in the conditional (I converted the hex code into its RGB equivalent in the conditional):

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

Any explanations as to why this is?

Is it the conditional itself that is off?

Help is greatly appreciated.

Answer 1

There might be problem of comparsion of color value. How about:

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

This block of console.logs should help you determine where in the chain the object is breaking:

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

If all of these print out non-null, then the appendChild() should work.

You can also try a different way of reading backgroundColor , like so:

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