Reset Button Doesn't Clear Input Balance

**Can anyone help? **

After clicking the reset button to entirely clear the form, I enter new numbers and click deposit and then click the balance display button. I expect to see the new balance here but what happen here is the previous balance, the balance amount before I clicked the reset button to entirely clear the form, is not really cleared it is still inside of it (but not visible) the new balanced entered is added to that old balance amount. What do I need to fix or add to my codes to see expected new balance amount when resetting it and entering new numbers? I expect to see $20 in the balance if I entered $20.
I did not include JS dollar sign format I used in my post here because they are too long.

<script>
var accountBalance = 0;
function deposit(){
	var moneyIn = document.getElementById("inAmt").value;
	accountBalance += parseFloat(moneyIn);

}

function Withdraw(){
	var moneyOut = document.getElementById("inAmt").value;
	accountBalance -= parseFloat(moneyOut);

	
}


function displayBalance(){
	document.getElementById("balance").value = dollarFormat(accountBalance +"");
}

function clearForm(){
  document.getElementById("balance").value.reset();
}

</script>

		
			<form class="form-container">
				<h3>ATM Project</h3>
				  <div class="form-group">
				    <label for="amtEnter">Enter Amount</label>
				    <input type="number" class="form-control" id="inAmt" placeholder="Enter Amount">
				  </div>
				  <div class="form-group">
				    <label for="amtB">Balance</label>
				    <input type="balance" class="form-control" id="balance" placeholder="Balance">
				  </div>
				  
				  
				  <input type="button" class="btn btn-primary btn-block" value="Deposit" onclick="deposit()"/>

				  <input type="button" class="btn btn-success btn-block" value="Withdraw" onclick="Withdraw()"/>

				   <input onclck="button" class="btn btn-info btn-block" value="Display Balance" onclick="displayBalance()"/>

				 <button type="reset" class="btn btn-warning btn-block" value="reset" onclick="clearForm()">Reset</button>
        
          

			</form>

A quick look, but I don’t see anywhere that you reset accountBalance to 0.

Screenshot%20(316)

Here is a screenshot of my project.

Again quick look, but the reset input, resets the value of displayBalance (what you see displayed). It does not set the variable accountBalance to 0.

1 Like

Is there anywhere this might be running live, such as Codepen, etc. that we might be able to see a working version? I’m seeing a few things that are outright missing that would make the code actually work the way you expect, such as attributes being misnamed, functions not being referenced, and so on and I’m curious if you’ve just accidentally omitted them from the code you provided here.

1 Like

Here is a link to it on Codepen. Will appreciate if you can help.

https://codepen.io/MiZoCoder2016/full/oKedww

Setting the HTML tag with an attr type of “reset” will automatically handle resetting the entire form for you.

What it won’t do, however, is reset the actual values that are being stored through your script. The only thing your function should be doing is handling the values in the background (e.g. the variables), not messing with the form itself.


Calling the reset() fx on the element through javascript will force the script to close, thus everything that would run or come after the reset() fx call wouldn’t actually run. In other words:

This doesn’t work

function clearForm() {
  document.getElementById("balance").value.reset();
  accountBalance = 0;
}

This works

function clearForm() {
  accountBalance = 0;
  document.getElementById("balance").value.reset();
}

But like I said, the only thing your function should do is this:

function clearForm() {
  accountBalance = 0;
}

(PS - You have a typo on your Display Balance button, instead of “type” you wrote “onclck” :stuck_out_tongue_winking_eye:)

1 Like

@huntinghawk1415 I wish I could mark your answer as the solution.

2 Likes

Oh well, the only thing that matters is if it helps :grin:

1 Like

I corrected the typo and added this code and it works.
function clearForm(){
document.querySelector(".form-container").reset();
accountBalance = 0;
}
Here is the link:
https://codepen.io/MiZoCoder2016/full/oKedww