Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Bronx, NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with objects/DOM

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

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Bronx, NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It seems like I posted this in the wrong section. Sorry guys. If a mod needs to move this, please do so.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Lots and lots of errors in the html. Here's a start for you:
    place holder is a hint as to what belongs in an input box and not what's there or should be there, so I changed it to the attribute value :
    Code:
    <input id="bbalance" type="text" size="10" style="background-color:#cccccc;" value = "" readonly>
    JS should fill this in after it finds out your balance. Probable from a database, but for now we'll just assume and add it this way:
    Code:
    document.getElementById("bbalance").value = "1000";
    Your "Make Deposit" button does nothing. I added the onclick to it:
    Code:
    <input style="background-color:blue; color:white; border:solid black 4px;" type="button" onclick="add();" value="MAKE DEPOSIT"/>
    And to make that work I made a function named add()
    This is the JS needed to do this and the main html:

    Code:
    <body>
    <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" style="background-color:#cccccc;" value = "" readonly>
    	</div>
    	</div>
    	</div>
    </form>
    
    <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;">
    	<label>CHARGE:</label>
    	<input type="text" size="10" readonly style="background-color: #CCCCCC;" id="depositCharge" />
    </div>
    <div>
    	<label>NEW BALANCE:</label>
    	<input type="text" size="10" readonly style="background-color: #CCCCCC;" id="newBalance" />
    </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" onclick="add();" value="MAKE DEPOSIT"/>
    	<input style="background-color:blue; color:white; border:solid black 4px;" type="button" value="CLEAR" onClick="reset()" />
    </div>
    </div>
    </form>
    
    <script type="text/javascript">
    document.getElementById("bbalance").value = "1000";
    
    function add(){
    	var bal = document.getElementById("bbalance").value;
    	var deposite = document.getElementById("depositValue").value;
    	document.getElementById("depositCharge").value = "$2.00";
    	document.getElementById("newBalance").value = Number(bal) + Number(2) + Number(deposite);
    }
    </script>
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •