I'm in the midst of developing a game and have incorporated a progress bar to facilitate the incrementation of certain values on my HTML page. However, once the progress bar hits 100%, it updates the cost and level only once. After that initial update, it fails to refresh the hard drive level regardless of how many times you trigger it. How can I ensure the variable keeps updating?
//statistics
var money = document.getElementById('cash');
var memory = document.getElementById('ram');
var connection = document.getElementById('internet');
var storage = document.getElementById('harddrive');
var levels = document.getElementById('level');
//virtual store
function levelup(t){
var bar = document.getElementById('lvelprogress');
bar.value = bar.value + t;
t = 0
if(t == 100){
bar.value = 100;
};
};
function upgradehd(al) {
var hdc = document.getElementById('hdc');
var hdl = document.getElementById('hdl');
var hdLevel = 1;
var newStorage = 250;
var timeoutValue = levels * 20;
var newHdc = Math.floor(2.5 * hdc.innerHTML);
var progressBar = document.getElementById('progressBar');
var statusInfo = document.getElementById('status');
statusInfo.innerHTML = al+"%";
progressBar.value = al;
document.getElementById('lvelprogress').max = 100;
al++
var simulation = setTimeout("upgradehd("+al+")",timeoutValue);
if(al == 100){
var experiencePoints = hdc.innerHTML / 4;
levelup(experiencePoints);
statusInfo.innerHTML = "100%";
hdl.innerHTML = hdLevel + 1;
hdc.innerHTML = newHdc;
storage.innerHTML = newStorage + 50;
al=0;
statusInfo.innerHTML = al+"%";
progressBar.value = 0;
clearTimeout(simulation);
};
};.upgrade{
background-color: #66ff33;
width: 200px;
}
.shop{
background-color: black;
color: #66ff33;
width: 200px;
border: 5px solid #cccccc
}
.stats{
float: right;
height: 175px;
width: 150px;
background-color: #000;
color: #66ff33;
margin-left: 2px;
text-align: center;
display: inline-block;
}<div class="stats">
<p>Level: <span id="level">1</span></p>
<progress style="width:150px;background-color:#66ff33;" id="lvelprogress" value="0" max="100"></progress>
<p>Cash: $<span id="cash">50</span></p>
<p>R.A.M: <span id="ram">100</span>MB</p>
<p>Internet Speed: <span id="internet">25</span>MB/s</p>
<P>Hard Drive: <span id="harddrive" >250</span>GB</P>
</div>
<div id="shop" class="shop">
<button class="exit" onclick="hideshop()">X</button>
<p id="uram">Upgrade R.A.M: $<span id="urc">50</span> Level:<span id="url"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<p id="uis">Upgrade Internet Speed: $<span id="isc">200</span> Level:<span id="isl"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<p id="uhd">Upgrade Hard Drive: $<span id="hdc">100</span> Level:<span id="hdl"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<progress class="upgrade" id="progressBar" value="0" max="100"></progress>
<span id="status"></span>
</div>