Javascript Variable Not Updating Using Progress Bar

Question

I am making a game and have used a progress bar to help increment some values on my html page. But, once the bar reaches 100% it updates the cost and the level but it only works once. After that it doesn't update the hard drive level no matter how many times you click it. How can I keep the variable updating?

//stats
var cash = document.getElementById('cash');
var ram = document.getElementById('ram');
var internet = document.getElementById('internet');
var hd = document.getElementById('harddrive');
var level = document.getElementById('level');
//shop
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 levelhd = 1;
	var nhd = 250
	var to = level * 20;
	var nhdc = Math.floor(2.5 * hdc.innerHTML); 
	var bar = document.getElementById('progressBar');
	var status = document.getElementById('status');
	status.innerHTML = al+"%";
	bar.value = al;
	document.getElementById('lvelprogress').max = 100;
	al++
	var sim = setTimeout("upgradehd("+al+")",to);
	if(al == 100){
		var xp = hdc.innerHTML / 4;
		levelup(xp);
		status.innerHTML = "100%";
		hdl.innerHTML = levelhd + 1;
		hdc.innerHTML = nhdc;
		hd.innerHTML = nhd + 50;
		al=0;
		status.innerHTML = al+"%";
		bar.value = 0;
		clearTimeout(sim);
	};
};

			.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>

You are never setting the value back to 0 when you level up. You are setting it at or above 100 in your levelup() function. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jul 6, 2016 at 18:49
hdl.innerHTML = levelhd + 1; this should update the hard drive level but it doesn't. — MCC
– MCC, Commented Jul 6, 2016 at 18:54
It is, but 2 is the highest it can go. You reset levelhd back to 1 every time the function is ran. — Spencer Wieczorek
– Spencer Wieczorek, Commented Jul 6, 2016 at 18:56

Luca Jung · Accepted Answer · 2016-07-06 18:55:49Z

You always set the LevelValue to 1. var levelhd = 1; But you have to use the current Level from HTML or you save it into a var in your JavaScript.

I changed the line:
var levelhd = parseFloat(hdl.innerHTML);

//stats
var cash = document.getElementById('cash');
var ram = document.getElementById('ram');
var internet = document.getElementById('internet');
var hd = document.getElementById('harddrive');
var level = document.getElementById('level');
//shop
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 levelhd = parseFloat(hdl.innerHTML);
  var nhd = 250
  var to = level * 20;
  var nhdc = Math.floor(2.5 * hdc.innerHTML);
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  document.getElementById('lvelprogress').max = 100;
  al++
  var sim = setTimeout("upgradehd(" + al + ")", to);
  if (al == 100) {
    var xp = hdc.innerHTML / 4;
    levelup(xp);
    status.innerHTML = "100%";
    hdl.innerHTML = levelhd + 1;
    hdc.innerHTML = nhdc;
    hd.innerHTML = nhd + 50;
    al = 0;
    status.innerHTML = al + "%";
    bar.value = 0;
    clearTimeout(sim);
  };
};

.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>

Collectives™ on Stack Overflow

Javascript Variable Not Updating Using Progress Bar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related