Variable not holding value inside their scope

Question

In the function below, I have this 2 variables, size and total, which should be acessible in the entire function block, but when the execution arrives in the third if, they present the value undefined:

function update_cart() {
  var cart_size = document.getElementById('cart_size');
  var cart_status = document.getElementById('cart_status');
  var cart_total = document.getElementById('cart_total');

  var size, total;

  if(cart_size !== null) {
    var cliente = cart_size.dataset.cliente;
    var url = cart_size.dataset.url;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        size = xhr.responseText;
        cart_size.innerHTML = size;
        if(size == 0)
          cart_size.style.display = 'none';
        else
          cart_size.style.display = 'block';
      }
    };
    var formData = new FormData();
    formData.append("cliente", cliente);
    xhr.send(formData);
  }

  if(cart_total !== null) {
    var cliente = cart_total.dataset.cliente;
    var url = cart_total.dataset.url;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        total = xhr.responseText;
        var currency = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(total);
        cart_total.innerHTML = currency;
      }
    };
    var formData = new FormData();
    formData.append("cliente", cliente);
    xhr.send(formData);
  }

  if(cart_status !== null) {
    switch(size) {
      case 0:
        cart_status.innerHTML = 'A cesta de compras está vazia.';
        document.getElementById('table').style.display = 'none';
        break;
      case 1:
        cart_status.innerHTML = size + ' produto adicionado na cesta, com valor ' + total;
        document.getElementById('table').style.display = 'block';
        break;
      default:
        cart_status.innerHTML = size + ' produtos adicionados na cesta, com valor ' + total;
        document.getElementById('table').style.display = 'block';
        break;
    }
  }
}

I already tried declare them with var and let, with the same result. In the page where cart_status exists, both cart_size and cart_total exists.

Anyone can give a hint of how fix that issue?

Come on, just specify what are the two variables you are talking about. — MarkSkayff, Nov 29 '19 at 19:05
You don't seem to assign them a value anywhere I can see in the code. — html_programmer, Nov 29 '19 at 19:06
I think your third `if()` is being executed before your requests are finished. — Camilo, Nov 29 '19 at 19:07
@Trace I do with `size = xhr.responseText;` and `total = xhr.responseText;` — Kleber Mota, Nov 29 '19 at 19:08
If those variables are global, meaning they are defined above the function, you don't need to re-declare them with `var`. Just use them, and they should keep their values. — MarkSkayff, Nov 29 '19 at 19:08
@MarkSkayff they are not. The declaration shown in the code is the only declaration for them. — Kleber Mota, Nov 29 '19 at 19:09
When first request finished, do 2nd request, when 2nd request finished you have all the values you need. — Camilo, Nov 29 '19 at 19:13
@KleberMota this link can help you understand better how JavaScript asynchronicity works: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call -- you need to restructure your code so that you place your logic inside the AJAX callbacks. — Guilherme Sehn, Dec 03 '19 at 01:53

score 0 · Answer 1 · answered Nov 29 '19 at 19:11

You have to understand that the call to xhr.onreadystatechange is an asyncrnous call. So, if you are trying to capture/user the value of size or total before the async action has happend/resolved, you will get the undefined value in them.

What you have to do there is use callbacks to deal with them values, after they come from the asyncrnous call.

score 0 · Answer 2 · answered Nov 29 '19 at 19:11

It doesn't work because these variables are defined in a callback.

xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        size = xhr.responseText;
        cart_size.innerHTML = size;
        if(size == 0)
          cart_size.style.display = 'none';
        else
          cart_size.style.display = 'block';
      }
    };

This code is called asynchronously, read: later, when you receive the response of the network call.
If you want to access the variable, you must move the code that uses the variable to the callback.

Camilo · Answer 3 · 2019-12-03T01:46:22.020

As others said, XMLHttpRequest is asyncronious by default. Meaning that it won't stop the rest of the script from executing.

So you could wait until the first request finished to do the next one, and after the second request finished, you should have all the values you need.

Something like this I think:

var firstRequest = new XMLHttpRequest();
firstRequest.open('POST', 'someUrl');
firstRequest.onreadystatechange = function() {
  if (firstRequest.readyState == 4 && firstRequest.status == 200) {
    size = firstRequest.responseText;
    var secondRequest = new XMLHttpRequest();
    secondRequest.open('POST', 'someOtherUrl');
    secondRequest.onreadystatechange = function() {
      if (secondRequest.readyState == 4 && secondRequest.status == 200) {
        total = secondRequest.responseText;
        // Now you should have both size and total variables available
      }
    };
  }
};

Not pretty but it should work.

Variable not holding value inside their scope

3 Answers3