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

Is it required to use `XMLHttpRequest`? There's better options these days if allowed. — Phix, Mar 03 '21 at 23:20
can you clarify what you mean by "`var2` and `var3` are `undefined`"? Perhaps make a snippet with some `console.log`s to show this? I can't see how they can be `undefined` in this particular snippet... — Robin Zigmond, Mar 03 '21 at 23:21
Please provide a [mre], because your code works just fine: https://jsfiddle.net/y4L82d7q/ — , Mar 03 '21 at 23:29
code looks perfectly fine. My guess.... your actual code has the problem, not what you changed it to. — epascarello, Mar 03 '21 at 23:51
That's the code, `var2` and `var3` are the variables (still not ready for better names). Added more code for `classSwitch()` for more clarity — 1000Gbps, Mar 04 '21 at 15:59
Please create a [mre] that actually reproduces the problem. The code you posted is fine, and we cannot help you unless we see broken code. Also that's not all of your code I assume, because you're not sending or opening the xhttp. — , Mar 04 '21 at 16:12
Well, this is whole code, that is used to send a request. Despite it's working for you, the problem is still here - `var2` (sOrigin) and `var3` (stateButtonID) , are always `undefined` when passed to `classSwitch()` — 1000Gbps, Mar 04 '21 at 19:54

score 0 · Answer 1 · answered Mar 04 '21 at 00:06

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);
      }
    }
  }

};

score 0 · Answer 2 · answered Mar 04 '21 at 00:36

0

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}`);
}

answered Mar 04 '21 at 00:36

Tom O.

5,730
2
21
35

Already tried that variant before opening this question. Both vars are still `undefined` – 1000Gbps Mar 04 '21 at 19:55
If your code matched the code in the snippet then the variables would not be undefined, as you see in the example. Something must have been different or there may have been additional code that caused the variables to become undefined. – Tom O. Mar 05 '21 at 15:41
Think I found the culprit - id values of elements inserted as string but not in DOM are not always defined – 1000Gbps Mar 05 '21 at 17:51

score 0 · Answer 3 · answered Aug 22 '22 at 13:27

0

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

answered Aug 22 '22 at 13:27

Alx

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 26 '22 at 07:03

Unable to pass variables to onreadystatechange

3 Answers3