In class we have an assignment to add javascript functionality to this "bank account" problem. I have tried to learn what DOM is, how to instantiate objects, and how to use the associated methods with javascript. I feel as if I'm never going to understand this and I need to get past this assignment already. Here is my code (it is not finished yet):
HTML Code:
<html>
<head>
<style type="text/css">
label{width:250px; display:block; float:left;} 
input{border:solid black 2px;font-size:large;}
textarea{border:solid black 2px;font-size:large;}
</style>

<script type="text/javascript">

bankingObject = new Object();

var WITHDRAWCHARGE = 2;
var DEPOSITCHARGE = 1;

function deposit(depositAmount){
var depositNumber;
var balanceNumber;
var balance = getBalance();

depositAmount = document.depositForm.depositValue.value;

isNumeric(depositNumber);

// document.depositForm.depositCharge.value = "2";

var deposit = (parseFloat(depositNumber) + parseFloat(balanceNumber)) - DEPOSITCHARGE;

var depo = parseFloat(deposit);

document.depositForm.newBalance.value = depo;
document.depositForm.depositCharge.value = "2";

updateBalance(depo);
}

function updateBalance(amount){
document.balanceForm.bbalance.value = amount;

}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function getBalance(){
return document.balanceForm.bbalance.value;
}

// reset function "resets", or clears all fields in any form.
function reset()
{
document.getElementById("depositForm").reset();
}

function reloadBalance(startingBalance, currentBalance){
}

function withdraw(withdrawalAmount, currentBalance){
var withdraw = document.getElementById(withdrawalAmount);

withdraw.value = parseInt(((currentBalance - withdraw) - withdrawCharge));

updateBalance(withdraw);
}

function validateDepositForm(){
balanceForm = document.balanceForm;

if(

}


</script>
</head>
<body>
<table>
<tr>
<td colspan='2'>
<div style="width:100%;font-size: large;">
<form id = "balanceForm">
<div style="width:450px; margin:0px auto; background-color:gold; color:white; border:solid black 5px;"> 
<div style="text-align:center; width:430px; background-color:red; color:black;padding:10px; padding-top:5px; font-size:xx-large;">BMCC E-BANK</div>
<div style="border:solid black 4px;border-left:0px; border-right:0px; padding:10px;">
<div style="">	<label>CURRENT BALANCE:</label> 
<input id="bbalance" type="text" size="10" readonly style="background-color:#cccccc;" placeholder = "1000"/>
</div>
</div>	
<div style="border-top:solid black 2px; text-align:center; margin: 0px; padding:10px; background-color: orange;">
<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="RELOAD"/>
<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="CLEAR" onclick = "clear('bbalance')" />
</div>
</div>
</form>
</div>
</td>
</tr>
<tr>
<td>
<div id="depositDiv" style="width:100%;font-size: large;">
<form id = "depositForm">
<div style="width:450px; margin:0px auto; background-color:blue; color:white; border:solid black 5px;"> 
<div style="text-align:center; width:430px; background-colorrange; color:black;padding:10px; padding-top:5px; font-size:xx-large;">DEPOSIT</div>
<div style="border-top:solid 4px black; border-bottom:solid black 4px; border-left:0px; border-right:0px;; padding:10px;">
<label>DEPOSIT AMOUNT:</label>
<input type="text" size="10" id="depositValue"/>
</div>
<div style="background-colorrange;padding:2px;"></div>
<div style="border-top:solid black 4px;border-bottom:solid black 2px; border-left:0px; border-right:0px; padding:10px;">
<div style="">	
<label>CHARGE:</label> 
<input type="text" size="10" readonly style="background-color: #CCCCCC;" id="depositCharge" />
</div>
<div style="">
<label>NEW BALANCE:</label>
<input type="text" size="10" readonly style="background-color: #CCCCCC;" id="newBalance" />
</div>
</div>
<div style="border-top:solid black 2px;border-left:0px; border-right:0px;; text-align:center; margin: 0px; padding:10px; background-color: orange;">
<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="MAKE DEPOSIT"/>

<!-- JAVASCRIPT. Function deposit() is called after user clicks MAKE DEPOSIT.-->
<script>
document.getElementById("depositDiv").;

</script>

<!-- what's the difference between using a DOM event's assignment 
with input and trying to accomplish the same task within the function, 
like the squaregen.html file?-->

<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="CLEAR" onClick="reset()" />
</div>
</div>
</form>
</div>
</td>
<td>
<div style="width:100%;font-size:large;">
<form>
<div style="width:450px; margin:0px auto; background-color:blue; color:white; border:solid black 5px;"> 
<div style="text-align:center; width:430px; background-colorrange; color:black;padding:10px; padding-top:5px; font-size:xx-large;">CASH</div>
<div style="border-top:solid 4px black; border-bottom:solid black 4px; border-left:0px; border-right:0px;; padding:10px;">
<label>CASH AMOUNT:</label>
<input type="text" size="10" />
</div>
<div style="background-colorrange;padding:2px;"></div>
<div style="border-top:solid black 4px;border-bottom:solid black 2px; border-left:0px; border-right:0px; padding:10px;">
<div style="">
<label>CHARGE:</label>
<input type="text" size="10" readonly style="background-color: #CCCCCC;"/>
</div>
<div style="">
<label>NEW BALANCE:</label>
<input type="text" size="10" readonly style="background-color: #CCCCCC;"/>
</div>
</div>
<div style="border-top:solid black 2px;border-left:0px; border-right:0px;; text-align:center; margin: 0px; padding:10px; background-color: orange;">
<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="GET CASH" />
<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="CLEAR" onClick="reset()" />
</div>
</div>
</form> 
</div>
</td>
</tr>
</table>
</body>
</html>
Now, the functionality seems simple: The user starts out with $1000 (or however much you'd like them to start out with). When the user clicks on MAKE DEPOSIT, its supposed to "deposit" the inputted amount, with a deposit charge of $2. Same goes for withdraw form, but the charge is $1 instead. I've only managed to get the clear button to work (only through the reset function). I honestly don't know which other way to approach this problem. Idk if I should add JS to page when needed (if it'll actually make the forms work) or just add everything in before the forms. Any help is appreciated