Assign a variable as the value for a jQuery ui progress bar

Question

Im trying to create a progress bar with values being returned from a server. Im parsing this float and assigning it to a variable that im using as the value for my progress bar but it isn't being displayed. Im wondering if this has something do with my variable scope so that when the progress bar is being initialized my variable is undefined? I tried removing var to make it global but still no luck. Any help is appreciated!

Here is my jsfiddle example

HTML

<h3>Static Value</h3>
<div id="avg-1">
6.7
</div>
<div id="avg-wrap">

</div>

<h3>Dynamic Value</h3>
<div id="avg-2">
    6.7
</div>
<div id="avg-wrap2">

</div>

JavaScript / jQuery

//static value
$( "#avg-wrap" ).progressbar({
value: 6.7
});



var avg1 = document.querySelector('#avg-2').innerText;
parseFloat(avg1); 
avg1*10;

//dyamic value
$( "#avg-wrap2" ).progressbar({
value: avg1
});

Answer 1

Actually global variable was not issue, issue was that you were not getting value from div correctly the correct way is

replace this

var avg1 = document.querySelector('#avg-2').innerText;
 parseFloat(avg1); 
avg1*10;

with this

var avg1 = $('#avg-2').html();
parseFloat(avg1); 
avg1=avg1*10;

Complete Sample

//static value
$( "#avg-wrap" ).progressbar({
    value: 6.7
});    

var avg1 = $('#avg-2').html();
parseFloat(avg1); 
avg1=avg1*10;

//dyamic value
$( "#avg-wrap2" ).progressbar({
    value: avg1
});

I have used jquery to access value and then multiplied it by 10 and it worked cheers