Unable to pass variables to onreadystatechange

Question

This is the current source code:

var xhttp = new XMLHttpRequest();
  
function passVars(var1, var2, var3) {
  if (var1.readyState == 4) {
    if (var1.status == 200) {
      var data = var1.responseText;

      if (data) {
        playSuccess();
        classSwitch(data, var2, var3);
      } else {
        playFailure();
        alert("Error: returned status code " + var1.status + " " + var1.statusText);
      }
    }
  }
}
  
xhttp.onreadystatechange = function() { 
  passVars(xhttp, "tab", "p1234");
};

xhttp.open("POST", "index.php", true);
xhttp.send(formData); //formdata is a POST send to PHP's backend which returns responseText = 0 or 1 for var data

function classSwitch(state, sOrigin, stateButtonID) {
  if (sOrigin === "tab") {
    Monitored = state;
    if (state === "1") {
      if (document.getElementById("setmonitoring").classList.contains("productmonitoringdisabled")) {
        document.getElementById("setmonitoring").classList.remove("productmonitoringdisabled");
      }
      document.getElementById("setmonitoring").classList.add("productmonitoringenabled");
    }
    
    if (state === "0")  {
      if (document.getElementById("setmonitoring").classList.contains("productmonitoringenabled")) {
        document.getElementById("setmonitoring").classList.remove("productmonitoringenabled");
      }
      document.getElementById("setmonitoring").classList.add("productmonitoringdisabled");
    }
  }
  
  if (sOrigin === "issues") {
    if (state === "1") {
      if (document.getElementById(stateButtonID).classList.contains("productmonitoringdisabled")) {
        document.getElementById(stateButtonID).classList.remove("productmonitoringdisabled");
      } else document.getElementById(stateButtonID).classList.add("productmonitoringenabled");
    }
    
    if (state === "0")  {
      if (document.getElementById(stateButtonID).classList.contains("productmonitoringenabled")) {
        document.getElementById(stateButtonID).classList.remove("productmonitoringenabled");
      } else document.getElementById(stateButtonID).classList.add("productmonitoringdisabled");
    }
  }
}

Tried a lot of ways to pass them using mainly SO anwsers and each time var2 and var2 are undefined. This is used in an inventory control system, early alpha version. The idea is to pass element's id to change button class when the backend returns product's current monitoring state

Any ideas how to pass those variables? Thanks in advance

Answer 1

Your structure is no good. You can't pass xhttp like that in a asynchronous call. Rewrite it directly like this...

xhttp.onreadystatechange = function() { 

  if (xhttp.readyState == 4) {

    if (xhttp.status == 200) {

      var data = xhttp.responseText;

      if (data) {

        playSuccess();

        classSwitch(data, 'tab', '1234');

      } else {

        playFailure();

        alert("Error: returned status code " + xhttp.status + " " + xhttp.statusText);
      }
    }
  }

};

Answer 2

Below is a minimal example of how to pass parameters to the onreadystatechange callback function. You've overcomplicated it a bit - there's no need to pass your xhttp variable to the callback either since it's already available in scope.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://developer.mozilla.org/");
xhr.send();
xhr.onreadystatechange = function() {
  callback("tab", "1234");
};


function callback(var1, var2) {
  console.log(`var1 = ${var1}`);
  console.log(`var2 = ${var2}`);

  //Do your xhr.readyState and xhr.status checks in this function
  console.log(`xhr.readyState = ${xhr.readyState}`);
  console.log(`xhr.status = ${xhr.status}`);
}

Answer 3

used

function passVars(var1, var2, var3) {
xhr.onreadystatechange = function(e) {}
}

the "e" in the function bracket will call back all var you have before in the function passVars