Как сделать математику с переменными из разных функций

Question

Okey, поэтому у меня есть два вызова AJAX и внутри них у меня есть две переменные, к которым я хочу получить доступ, поэтому я могу сделать с ними математику и получить разницу между ними!

Мой код:

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

Я хочу, чтобы найти разницу между «sugString» и «HTMLString», то я хочу, чтобы поместить его в мой HTML код еще раз, как я сделал с «sugString» и «HTMLString» , Кто-нибудь получил хороший ответ для меня, как я могу это сделать? Спасибо за ваше время! :)

Я получил это решение, но я получаю эту ошибку: Не удается прочитать свойство «Кожа: Flaming Skull лица Бандана» неопределенной

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

В простом интересе сделать переменные доступны в то же контекст, вы можете объявить их вне своих функций, сохраняя при этом их назначение в своих функциях. Простой план решения будет:

var sugString; 
var htmlString; 
var quantityString; 

function renderFlamingSkullSug(data) { 

    sugString = ... 

    ... 
} 

function renderFlamingSkull(data) { 

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

// Execute your functions 

// Then do some maths 

В вашем случае, однако, ваши функции вызываются асинхронно, поэтому woud нужно поставить некоторые дополнительные механизмы для обеспечения того, как ваши обратные вызовов фактически exectued, прежде чем делать некоторую математику на переменные, которые они назначают.

Простейшая оценка в вашем конкретном случае может состоять в том, чтобы просто включить вашу математическую логику в функции обратного вызова - и использовать механизм флага, чтобы решить, готовы ли вы его выполнить.

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(){...}; 

Существует немного дублирования, и вы можете немного повлиять, но это общая идея.

EDIT: полное заполнение раствора в заготовках будет следующим. Как я отмечаю в комментарии, вам все равно придется решать любые другие проблемы, которые могут возникнуть в вашем коде. Я просто заполнил пробелы в общей схеме решения с кодом, который вы предоставили.

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