Changing global variables within a POST request

Question

Changing global variables within a POST request

I am currently developing a quiz application for the Noops Challenge on Github, utilizing the Fizzbot API available at Noops Challenge.

To keep track of the current question and the next question URLs, I have defined global variables to store and assemble them.

var baseurl = "https://api.noopschallenge.com";
var nextQuestion = "/fizzbot/questions/1";
var url = "";

There is a submit function in my app that sends a POST request to the server. If the answer is correct, it then retrieves the URL of the next question.

function submit() {
    var answer = document.getElementById("answer").value;

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

            var response = JSON.parse(this.responseText);

        this.nextQuestion = response.nextQuestion;
        this.url = baseurl + this.nextQuestion;

        console.log("Next Question: " + this.url);  
        }
    };

    xhttp.open("POST", this.url, true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send(answer);

}

In addition to the submit button, there is also a next button in the quiz app. Even after answering correctly and submitting, clicking the next button still logs the same URL - .

function next() {
    console.log(this.url);
}

The issue seems to be related to the asynchronous behavior of the POST request. I need to find the best solution to resolve this problem. For a more detailed example illustrating the situation, check out the complete snippet provided below.

javascript ajax asynchronous

Answer 1

Answer №1

Global variables are stored in the window object. The keyword this has the ability to reference not only the window object but also various other objects. It's worth noting that neglecting to use this may still result in accessing a global variable.

The following code snippet operates within the global context:

function load() {
  this.url = this.baseurl + this.nextQuestion

In this instance, this is equivalent to window, thereby constructing this.url from the global variables.

The context shifts here:

  ...
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
      this.question = response.message;

      document.getElementById("question").innerHTML = this.question;
    }
  };

Here, this points to the xhttp object. By assigning this.question, you are essentially introducing a new property on xhttp and utilizing that value to update the text within <h5 id="question">. This setup works as intended, although it doesn't modify your global question variable.

Once again, a global variable is utilized:

  xhttp.open("GET", this.url, true);
  ...
}

A similar scenario unfolds when utilizing the submit button:

function submit() {
  ...
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);

      this.nextQuestion = response.nextQuestion;
      this.url = baseurl + this.nextQuestion;

Both this.nextQuestion and this.url generate properties within this newly instantiated xhttp object. However, since this wasn't prefixed before baseurl, and there's no local variable by that name, the global variable will be utilized! Essentially, implicitly executing:

xhttp.url = window.baseurl + xhttp.nextQuestion

This results in displaying a completely new URL:

      console.log("Next Question: " + this.url);
    }
  };

Nevertheless, the actual request continues to employ the original URL, as we're exiting the xhttp scope and relying on the unaltered global value here:

  xhttp.open("POST", this.url, true);
  ...
}

... and here:

function next() {
  console.log("URL to load: " + this.url);
  //GET request next question
}

To sum up: utilize window.url for setting the global value within another scope.

Information regarding 'this' on MDN

Answer 2

Global variables are stored in the window object. The keyword this has the ability to reference not only the window object but also various other objects. It's worth noting that neglecting to use this may still result in accessing a global variable.

The following code snippet operates within the global context:

function load() {
  this.url = this.baseurl + this.nextQuestion

In this instance, this is equivalent to window, thereby constructing this.url from the global variables.

The context shifts here:

  ...
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
      this.question = response.message;

      document.getElementById("question").innerHTML = this.question;
    }
  };

Here, this points to the xhttp object. By assigning this.question, you are essentially introducing a new property on xhttp and utilizing that value to update the text within <h5 id="question">. This setup works as intended, although it doesn't modify your global question variable.

Once again, a global variable is utilized:

  xhttp.open("GET", this.url, true);
  ...
}

A similar scenario unfolds when utilizing the submit button:

function submit() {
  ...
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);

      this.nextQuestion = response.nextQuestion;
      this.url = baseurl + this.nextQuestion;

Both this.nextQuestion and this.url generate properties within this newly instantiated xhttp object. However, since this wasn't prefixed before baseurl, and there's no local variable by that name, the global variable will be utilized! Essentially, implicitly executing:

xhttp.url = window.baseurl + xhttp.nextQuestion

This results in displaying a completely new URL:

      console.log("Next Question: " + this.url);
    }
  };

Nevertheless, the actual request continues to employ the original URL, as we're exiting the xhttp scope and relying on the unaltered global value here:

  xhttp.open("POST", this.url, true);
  ...
}

... and here:

function next() {
  console.log("URL to load: " + this.url);
  //GET request next question
}

To sum up: utilize window.url for setting the global value within another scope.

Information regarding 'this' on MDN

Answer 3

Answer №2

After diving deeper into the issue, I realized that the main challenge lied in managing variable scope rather than handling asynchronous operations in the code. To simplify my workflow and eliminate confusion with numerous this references, I decided to encapsulate most of my global variables within an object. This approach not only organized the code better but also improved clarity.

By utilizing an object with getters and setters, I found it much easier to access and manipulate all variables seamlessly across the codebase.

Answer 4

After diving deeper into the issue, I realized that the main challenge lied in managing variable scope rather than handling asynchronous operations in the code. To simplify my workflow and eliminate confusion with numerous this references, I decided to encapsulate most of my global variables within an object. This approach not only organized the code better but also improved clarity.

By utilizing an object with getters and setters, I found it much easier to access and manipulate all variables seamlessly across the codebase.

Changing global variables within a POST request

Answer №1

Answer №2

Similar questions

Tips for utilizing the vuetify readonly prop while enabling the selection menu

Tips for obtaining the entire date and time on one continuous line without any breaks or separation

The function for the "load next page" action in ngInfiniteScroll is continuously triggered

Using setTimeout with jQuery.Deferred

Having trouble getting Vuejs to work when appending an element to Fullcalender

The power of Three.js comes alive when utilizing appendChild and returning elements

Include certain tags to the content within the text apart from using bbcode tags

A bug in the modal dialog is causing it to disregard the value of

Unable to return true within an ajax call

What is the process for dynamically incorporating JavaScript files during compilation to serve as input for browserify?

Continuously encountering a Login Required message while attempting to upload a file on Google Drive

Generating HTML content from XML data with the help of JavaScript

The usage of arrow functions in ReactJS programming

Working with Three.js: Retrieving an object post-loading using GLTF Loader

Issue with making Flickr API request using XMLHttpRequest receiving an unsuccessful response

The setInterval function does not function properly in IE8 when set to 0

The functionality of a switch statement relies on the presence of a React-Router

Following an AJAX post within the MVC framework, the URL becomes excessively lengthy

Rails assets folder is not directed to the specified directory in the layout file

Invalid Resize Argument Causes Background to Not Appear on IE Browser