How To Resolve Undefined And Nan?

I'm building an Chrome extension and I encountered following error in my popup. I clearly defined 'total' variable and storing in it a value from local storage.But why am I getti

Solution 1:

The chrome.storage.local.get callback is executed asynchronously so total doesn't get defined until after you try to use it. If instead move the rest of the script into the callback it should work.

var total,percentage;

chrome.storage.local.get('myVariable', function (items) { 
    total = (items.myVariable);

    percentage = total/7.25;

    document.getElementById("total").innerHTML = total;
    document.getElementById("percentage").innerHTML = percentage;
});

Solution 2:

Two main errors: 1) just doing var x is a no-op in javascript, you must assign it a value. 2) even if you fix that you have a bigger bug. Storage is async so the line after 'get' is executed before you have the get result.