How to do math with variables from different functions

Question

Okey so i got two AJAX calls and inside them i got two variables i want to access so i can do some math with them and get the difference between them!

My code:

var flamingSkull = document.getElementById("flaming-skull");
var flamingSkullq = document.getElementById("flaming-skullq");
var flamingSkullSug = document.getElementById("flaming-skullsug");

  var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'https://api.opskins.com/IPricing/GetAllLowestListPrices/v1/?appid=433850');
    ourRequest.onload = function() {
      var ourData = JSON.parse(ourRequest.responseText);
      renderFlamingSkull(ourData);
};

   ourRequest.send();


var ourRequest2 = new XMLHttpRequest();
  ourRequest2.open('GET', 'https://api.opskins.com/IPricing/GetPriceList/v1/?appid=433850');
  ourRequest2.onload = function() {
     var ourData2 = JSON.parse(ourRequest2.responseText);
     renderFlamingSkullSug(ourData2);
};

   ourRequest2.send();



function renderFlamingSkullSug(data) {

   var sugString = data.response[ 'Skin: Flaming Skull Face Bandana' ][today].price / 100;

   flamingSkullSug.insertAdjacentHTML('beforeend', "$" + sugString);
}

function renderFlamingSkull(data) {

   var htmlString = data.response[ 'Skin: Flaming Skull Face Bandana' ].price / 100;
   var quantityString = data.response[ 'Skin: Flaming Skull Face Bandana' ].quantity;


   flamingSkull.insertAdjacentHTML('afterbegin', "$" + htmlString);
   flamingSkullq.insertAdjacentHTML('beforeend', "<p>(" + quantityString + ")</p>");
}

I want to find the difference between 'sugString' and "htmlString" then i want to put it into my html code again like i did with 'sugString' and 'htmlString'. Anybody got a good answer for me on how i can do this? Thanks for your time! :)

I got this solution, but then i get this error: Cannot read property 'Skin: Flaming Skull Face Bandana' of undefined

var flamingSkull = document.getElementById("flaming-skull");
var flamingSkullq = document.getElementById("flaming-skullq");
var flamingSkullSug = document.getElementById("flaming-skullsug");
var lowestPriceUrl = 'https://api.opskins.com/IPricing/GetAllLowestListPrices/v1/?appid=433850';
var priceListUrl = 'https://api.opskins.com/IPricing/GetPriceList/v1/?appid=433850';

function makeRequest (method, url, done) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
done(null, xhr.response);
};
xhr.onerror = function () {
done(xhr.response);
};
xhr.send();
}


makeRequest('GET', lowestPriceUrl, function (err, res) {
   if (err) { throw err; }

makeRequest('GET', priceListUrl, function (err, res2) {
   if (err) { throw err; }

var sugString = res.response[ 'Skin: Flaming Skull Face Bandana' ][today].price / 100;
   var htmlString = res2.response[ 'Skin: Flaming Skull Face Bandana' ].price / 100;
   var quantityString = res2.response[ 'Skin: Flaming Skull Face Bandana' ].quantity;

flamingSkullSug.insertAdjacentHTML('beforeend', "$" + sugString);
flamingSkull.insertAdjacentHTML('afterbegin', "$" + htmlString);
flamingSkullq.insertAdjacentHTML('beforeend', "<p>(" + quantityString + ")</p>");

// Complete division
// ==================
// var division = Math.round(sugString/htmlString)
  });
 });

Answer 1

In the mere interest of making your variables available in a same context, you may declare them outside your functions - while keeping assigning to them in your functions. A simple outline of the solution would be:

var sugString;
var htmlString;
var quantityString;

function renderFlamingSkullSug(data) {

   sugString = ...

   ...
}

function renderFlamingSkull(data) {

   htmlString = ...
   quantityString = ...
    ...
}

// Execute your functions

// Then do some maths

In your case however, your functions are called asynchronously, so you woud need to put some extra mechanism in place to ensure both your callbacks have actually exectued before doing some math on the variables they assign to.

A simpler apprach in your particular case may be to just include your math logic inside the callback functions - and use a flag mechanism to decide whether you are ready to execute it.

var sugString;
var htmlString;
var quantityString;
var firstCallbackExecuted = false;

function renderFlamingSkullSug(data) {

   sugString = ...
   if (firstCallbackExecuted) {
       doSomeMathAndDomManipulation()
   }
   firstCallbackExecuted = true;
   ...
}

function renderFlamingSkull(data) {

   htmlString = ...
   quantityString = ...
   if (firstCallbackExecuted) {
       doSomeMathAndDomManipulation()
   }
   firstCallbackExecuted = true;
    ...
}

// Execute functions asynchronously

function doSomeMathAndDomManipulation(){...};

There is a bit of duplication in there and you could factor a little bit, but that is the general idea.

EDIT: the complete solution filling in the blanks would be as follows. As i point out in the comment, you'll still need to work out any other lingering issue your code may involve. I just filled in the gaps of the general solution outline with the code you have provided.

var sugString;
var htmlString;
var quantityString;
var firstCallbackExecuted = false;

var flamingSkull = document.getElementById("flaming-skull");
var flamingSkullq = document.getElementById("flaming-skullq");
var flamingSkullSug = document.getElementById("flaming-skullsug");

var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'https://api.opskins.com/IPricing/GetAllLowestListPrices/v1/?appid=433850');
    ourRequest.onload = function() {
        if(this.status === 200) {
            var ourData = JSON.parse(ourRequest.responseText);
            renderFlamingSkull(ourData);
        } else {
            console.log('Status is not 200');
        }
};

var ourRequest2 = new XMLHttpRequest();
    ourRequest2.open('GET', 'https://api.opskins.com/IPricing/GetPriceList/v1/?appid=433850');
    ourRequest2.onload = function() {
        if(this.status === 200) {
            var ourData2 = JSON.parse(ourRequest2.responseText);
            renderFlamingSkullSug(ourData2);
        } else {
            console.log('Status is not 200');
        }
};

ourRequest.send();
ourRequest2.send();

function renderFlamingSkullSug(data) {

   var MostRecentDateAvailable = getMostRecentDate(data.response[ 'Skin: Flaming Skull Face Bandana' ]);

   sugString = data.response[ 'Skin: Flaming Skull Face Bandana' ][MostRecentDateAvailable].price / 100;

   manageMath();

   flamingSkullSug.insertAdjacentHTML('beforeend', "$" + sugString);
}

function renderFlamingSkull(data) {

   htmlString = data.response[ 'Skin: Flaming Skull Face Bandana' ].price / 100;
   quantityString = data.response[ 'Skin: Flaming Skull Face Bandana' ].quantity;

   manageMath();

   flamingSkull.insertAdjacentHTML('afterbegin', "$" + htmlString);
   flamingSkullq.insertAdjacentHTML('beforeend', "<p>(" + quantityString + ")</p>");
}

function doSomeMathAndDomManipulation(){
    // This is where you put you math and dom logic
    // relying on the sugString, htmlString, and quantityString variables
}

function manageMath(){
    if (firstCallbackExecuted) {
       doSomeMathAndDomManipulation()
    }
    firstCallbackExecuted = true;
}

// Method for converting date object to "yyyy-mm-dd" string format
Date.prototype.custoFormat = function(){
  var day = format2Digits(date.getDate());
  var month = format2Digits(date.getMonth() + 1);
  var year = date.getFullYear();
  return year + '-' + month + '-' + day;
};        

// Helper function
function format2Digits(n){
  return n<10? '0'+n:''+n;
}

function getMostRecentDate(obj){
    var date = new Date();
    var tryNb = 10;

    while(!obj[date.custoFormat()]){
      if(tryNb === 10) {
        console.log("Too many tries");
        return false;
      }
      date.setDate(date.getDate() - 1);
      tryNb++;
    }

    return date.custoFormat();
}