Kann ich in meiner Callback-Funktion nicht auf eine globale Variable zugreifen?

Question

Also ich eine Reihe von JSON aus der Twitch-API abrufen und versuchen, etwas an ein div anzuhängen.

HTML:

<div id="streamers" class="streamers"> 

</div> 

JS:

const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 
const streamers = document.getElementById("streamers"); 
for(let i = 0; i < channels.length; i++) { 
    let url = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=blahblahblahblah&callback=?"; 

    function callback(data) { 
    const li = document.createElement("li"); 
    li.textContent = channels[i]; 
    console.log(li); 
    streamers.appendChild(li); 
    } 

    $.getJSON(url, callback); 
} 

Jedoch habe ich einen Cannot read property 'appendChild' of null Fehler erhalte. Ich versuchte console.log(streamers), aber das gibt null zurück. Zugriff auf channels ist kein Problem, und dies ist auch eine globale Variable.

Ich kann das Problem leicht beheben, indem Sie die streamers Const in die Callback-Funktion setzen. Aber was ich wissen will ist, warum ich nicht global darauf zugreifen kann? Wenn ich richtig liege, suchen Variablen, die in einer Funktion nicht definiert sind, nach außen, bis eine Übereinstimmung gefunden wird.

Danke, James.

Answer 1

basierend auf der folgenden Definition "let und const deklarationen definieren Variablen, die auf die LexicalEnvironment des Ausführungskontexts beschränkt sind."

for(let i = 0; i < channels.length; i++) { // it enter's to a new scope