I'm trying to build a basic budget calculator tool in javascript which displays a running total at the top of the page which updates when individual budget items are changed. To do this I'm using [document.getElementById("runningTotal").innerHTML += total_sp;
]. This works fine for calculating the running total but every time I make a change the new total is appended to the old total, so the output on screen makes no sense. Can anyone tell me how I can do this so that the running total updates every time a change is made replacing the old total with the new total? I'm new to all this, so very grateful for any help you can offer. Cheers!
<script>
// defining pre-change spending levels
var research_sp = 217200
var wage_sp = 155000
var total_sp = wage_sp + research_sp
function changeresearchspending() {
var nameElement = document.getElementById("researchcalc");
//defining percentage change to research spending levels
var research_r = nameElement.value;
var research_ch = research_r * research_sp;
var research_sp_end = research_sp + research_ch;
total_sp = total_sp + research_ch
document.getElementById("researchChange").innerHTML += research_ch;
document.getElementById("endresearchTotal").innerHTML += research_sp_end;
document.getElementById("endTotalSpend1").innerHTML += total_sp;
document.getElementById("runningTotal").innerHTML += total_sp;
}
function changewagespending() {
var nameElement = document.getElementById("wagecalc");
//defining percentage change to wage spending levels
var wage_r = nameElement.value;
var wage_ch = wage_r * wage_sp;
var wage_sp_end = wage_sp + wage_ch;
total_sp = total_sp + wage_ch
document.getElementById("wageChange").innerHTML += wage_ch;
document.getElementById("endwageTotal").innerHTML += wage_sp_end;
document.getElementById("endTotalSpend2").innerHTML += total_sp;
document.getElementById("runningTotal").innerHTML += total_sp;
}
</script>
<div id="runningTotal">
SPENDING (RUNNING TOTAL) £
</div>
<br>
<div id="startresearchTotal">
Baseline research spending is: £
<script>document.write(research_sp)</script>
<br><br>
Baseline wage spending is: £
<script>document.write(wage_sp)</script>
<br><br>
Baseline total spending is: £
<script>document.write(total_sp)</script>
</div>
<br>
<input id="researchcalc" type="number">
<input type="button" value="change research spend" onClick="changeresearchspending()">
<div id="researchChange">
<br> Change in research spending is: £
</div>
<div id="endresearchTotal">
<br> New research spending is: £
</div>
<div id="endTotalSpend1">
<br> New total spending is: £
</div>
</div>
<br>
<input id="wagecalc" type="number">
<input type="button" value="change wage spend" onClick="changewagespending()">
<div id="wageChange">
<br> Change in wage spending is: £
</div>
<div id="endwageTotal">
<br> New wage spending is: £
</div>
<div id="endTotalSpend2">
<br> New total spending is: £
</div>
You can replace the += by =, like this:
document.getElementById("runningTotal").innerHTML = total_sp;