Array gives errors after JSON function

Your code is quite weak since you didn't manage the callback of every get you make. Also you didn't check if:

document.getElementById(twitchChannels[i])

is null, since the exception clearly stated that you can't get :

.style.backgroundColor

from nothing.

Basic check VanillaJS:

if(!document.getElementById("s"))
  console.log('id ' + twitchChannels[i] +  ' not found in dom')
else 
  console.log('id ' + twitchChannels[i] +  ' found in dom')

Also consider mixing JQuery with VanillaJS extremely bad practice; use proper JQuery method to access dom element by ID .

You should pass twitchChannel to the function because the var i is changing, this is an issue like others already mentioned: Preserving variables inside async calls called in a loop.

The problem is that you made some ajax call in a cicle, but the ajax calls are async.

Whey you get the first response, the cicle is already completed, and i==4, that is outside the twitchChannels size: that's why you get "4 undefined" on your console.

You can change your code in such way:

function test() {
    var twitchChannels = ["imaqtpie", "summit1g", "tyler1", "greekgodx"];

    for (var i = 0; i < twitchChannels.length; i++) {
        executeAjaxCall(twitchChannels[i]);
    }
}
function executeAjaxCall(twitchChannel){
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchChannel + '?client_id=XXXX', function(channel) {
        console.log(twitchChannel);

        if (channel["stream"] == null) {
            console.log("Offline: " + twitchChannel)
            $('#'+twitchChannel).css("background-color", "red");
        } else {
            console.log("Online: " + twitchChannel)
            $('#'+twitchChannel).css("background-color", "green");
        }

    });
    }
}

When console.log(i + " " + twitchChannels[i]); is called inside the callback function, the variable i has already been set to 4, and accessing the 4th element of array twitchChannels gives undefined since the array has only 4 elements.

This is because $.getJSON is a shorthand Ajax function which, as the name suggests, executes your requests asynchronously. So what actually happened is, based on the output you provided,

1. The loop is executed 4 times, and four Ajax requests have been sent.
2. The loop exits; i is already set to 4 now.
3. The ajax requests return; the callbacks are called, but the i value they see is now 4.

You can change the console.log inside your callback to something like console.log(i + " " + twitchChannels[i] + " (inside callback)"); to see this more clearly.

The correct result can be obtained by binding the current value of i to the closure.

function test() {
  var twitchChannels = ["imaqtpie", "summit1g", "tyler1", "greekgodx"];

  function make_callback(index) {
    return function (channel) {
        console.log(index + " " + twitchChannels[index]);

        if (channel["stream"] == null) {
          console.log("Offline: " + twitchChannels[index])
          document.getElementById(twitchChannels[index]).style.backgroundColor = "red";
        } else {
          console.log("Online: " + twitchChannels[index])
          document.getElementById(twitchChannels[index]).style.backgroundColor = "green";
        }
    }
  }

  for (var i = 0; i < twitchChannels.length; i++) {
    console.log(i + " " + twitchChannels[i]);

    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchChannels[i] + '?client_id=XXXX', make_callback(i));
  }

}