Changing a global variable using window not working

Question

I have the following code in javascript:

var max = 0;                                             //<---- HERE

var request = new XMLHttpRequest();
request.open('GET', 'HERE_GOES_API_ADDRESS', true);
request.onload = function (max) {                         //<---- HERE

  // Begin accessing JSON data here
  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(LoginLog => {

      window['max'] = LoginLog.id;                        //<---- HERE


    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
  }

}

request.send();

console.log(max);                                      // <---- HERE Gives 0

The expected value of max after the loop is 2. However, I am always getting 0.

why is the window not working? isn't supposed to be used when updating a global variable?

P.S: I have to update the max variable globally. console.log(max) was written only for testing purposes.

Answer 1

Event callback functions are always automatically passed the event that they are handling as their first argument, so when you write:

request.onload = function (max) { 

You are not actually passing max to the function, you are declaring a function argument to receive the first parameter that is passed to the function when it is invoked. When that happens it will be the load event of the request object and the event is evaluating to a number of 0. If you want to access a global in your callback, just reference it directly as max and don't both setting up an argument for the callback.

EDIT:

In addition to the issue above, the fact that you have console.log(max); sitting outside of the async. callback means that it will run before the async. operation is complete. Move that statement so that it is inside of the callback.

var max = 0; 

var request = new XMLHttpRequest();
request.open('GET', 'HERE_GOES_API_ADDRESS', true);
request.onload = function () {    // No argument needed

  // Begin accessing JSON data here
  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(LoginLog => {

      max = LoginLog.id;  // Just use the global
      console.log(max);   // Access the async result in the callback
    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
  }

}

request.send();