# Twitch Viewer - XmlHttpRequests

**URL:** <https://forum.freecodecamp.org/t/twitch-viewer-xmlhttprequests/137876>\
**Category:** General\
**Created:** [July 23, 2017, 10:12pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-xmlhttprequests/137876 "2017-07-23T22:12:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacobs322](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacobs322/32/61893_2.png) [@Jacobs322](https://forum.freecodecamp.org/u/Jacobs322)\
**Post date:** [July 23, 2017, 10:12pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-xmlhttprequests/137876/1 "2017-07-23T22:12:27Z")

</div>

Hi fellow campers, so I am here once again reaching out for you advice. More precisely, explanation.  
I figured the problem out myself but I don’t know why it works the way it works and I’d like to know.

So here’s the working code:

```
var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "sodapoppin"];
var xhttps = new Array();
var xhttps_responses = new Array();

for(var x = 0; x < streamers.length; x++){
    
    xhttps[x] = new XMLHttpRequest();
    console.log(xhttps[x]);
    
    xhttps[x].open('GET', "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[x]);
    
    xhttps[x].onreadystatechange = readyStateHandler(xhttps[x]);
    
    xhttps[x].send();
  

}

function readyStateHandler(xhttp){
    
    return function(){
        if(xhttp.readyState == 4){

            console.log(xhttp.responseText);

        }
    }
    
}

```

And here is the code that doesn’t work:

```
var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "sodapoppin"];
var xhttps = new Array();
var xhttps_responses = new Array();

for(var x = 0; x < streamers.length; x++){
    
    xhttps[x] = new XMLHttpRequest();
    console.log(xhttps[x]);
    
    xhttps[x].open('GET', "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[x]);
    
    xhttps[x].onreadystatechange = readyStateHandler(xhttps[x]);
    
    xhttps[x].send();
  

}

function readyStateHandler(xhttp){
    
    if(xhttp.readyState == 4){

        console.log(xhttp.responseText);

    }
    
}

```

The only difference is that the onreadystatechange callback returns a function or executes a function.  
Where’s the difference?  
Thank you for explanation of any kind! 🙂

---

<div class="post-metadata">

**Author:** ![grey7](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/grey7/32/10252_2.png) [@grey7](https://forum.freecodecamp.org/u/grey7)\
**Post date:** [August 5, 2017, 8:53am UTC](https://forum.freecodecamp.org/t/twitch-viewer-xmlhttprequests/137876/2 "2017-08-05T08:53:58Z")

</div>

The onreadystatechange property should contain the event handler to be called when the readyState event is fired. Thus, it’s value should be set to a function that would be executed once the event is fired.

`xhttps[x].onreadystatechange = readyStateHandler(xhttps[x]);`

In the above snippet, the `onreadystatechange` property is set to the value returned by the function `readyStateHandler`.

`readyStateHandler` is executed at the time of assignment, that is prior to sending the request to the API.

For the code that doesn’t work, when `readyStateHandler`, the value of `readyState` will be 1 as the connection has just been opened, but not sent, so the `if` condition evaluates to false and the function returns `null`, which is set to the `onreadystatechange` property.

But, in the case where you return a function, the `onreadystatechange` property contains a function, and this function will be executed once the `readyState` value for the corresponding xhr object changes.

You can refer the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange) link for `onreadystatechange`.

---

<div class="post-metadata">

**Author:** ![Jacobs322](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacobs322/32/61893_2.png) [@Jacobs322](https://forum.freecodecamp.org/u/Jacobs322)\
**Post date:** [August 5, 2017, 8:36pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-xmlhttprequests/137876/3 "2017-08-05T20:36:29Z")

</div>

Thank you very much 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:46pm UTC](https://forum.freecodecamp.org/t/twitch-viewer-xmlhttprequests/137876/4 "2021-01-17T20:46:13Z")

</div>

Closed on January 17, 2021, 8:46pm UTC