Javascript Help

**goldy30** · 11-30-2008 08:36 AM

I'm not very good at debugging although I've gone over it till by eyes started bleeding. It seems right but its not even calculating onClick??

Could someone tell me where I went wrong so I know?

INVESTMENT

Create an application that allows a Customer to enter an initial deposit (for example $100), an annual interest rate (say 12%, which is 1% per month) and a target savings amount (say $200). Determine how many months it will take for the customer to reach this target amount.
Save your program as investment.htm

what i've done:

HTML Code:

<html>
<head></head>
<body>

<script type="text/javascript">
function calc(){

var deposit = parseFloat(document.form_invest.deposit.value);
var percent = parseFloat(document.form_invest.percent.value)/12/100;
var target = parseFloat(document.form_invest.target.value);
var months = 0;

if (deposit < target){
    deposit = deposit + deposit * percent;
    months++;
    }

document.getElementById("disp").innerHTML = "Your investment will take " + parseFloat(months) + " months to reach your target amount.";
}
</script>
<center>
    <form name="form_invest">
        <table class="text" cellpadding="5">
            <tr>
                <td colspan="2" align="center"><b style="color:red">How much will you invest?</b></td>
            <tr>
                <td align="right">Deposit:    </td><td><input type="text" name="deposit" size="3"></td>
            </tr>
            <tr>
                <td align="right">Iterest Rate:</td><td><input type="text" name="percent" size="3">% </td>
            </tr>
            <tr>
                <td align="right">Target Amount:</td><td><input type="text" name="target" size="3"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="Calculate" onClick="calc"></td>
            <tr>
            <tr>
                <td colspan="2" align="center"><div id="disp" style="color:#ffffff;"></div></td>
            <tr>
        </table>
    </form>
</center>

</body>
</html>

**xPlozion** · 11-30-2008 10:09 AM

i haven't gotten the time to test it, but as far as debugging goes, if you've got firefox installed, get the web developer extension, as it has a built in error console which displays any javascript errors.

by the way, is this an assignment for school or something?

----------

OK, I found out why the function was never called to. instead of it being onclick='calc', it needs to be onclick='calc()'.

but no matter what i have the value set to ($1, 1%, target: $1000), it always says that it's going to take 1 month. that's because of the if() command. it only checks it once. for recursive commands (one that will continue until the requirement is met), use while or for (while in our case).

The following code works as planned:

HTML Code:

<html>
<head></head>
<body>

<script type="text/javascript">
<!--
function calc()
{

    var deposit = parseFloat(document.form_invest.deposit.value);
    var percent = parseFloat(document.form_invest.percent.value)/12/100;
    var target = parseFloat(document.form_invest.target.value);
    var months = 0;

    while (deposit < target)
    {
        deposit = deposit + (deposit * percent);
        months++;
    }

    document.getElementById("disp").innerHTML = "Your investment will take " + parseFloat(months) + " months to reach your target amount.";
}
-->
</script>
<center>
    <form name="form_invest">
        <table class="text" cellpadding="5">
            <tr>
                <td colspan="2" align="center"><b style="color:red">How much will you invest?</b></td>
            <tr>
                <td align="right">Deposit:</td><td><input type="text" name="deposit" size="3"></td>
            </tr>
            <tr>
                <td align="right">Iterest Rate:</td><td><input type="text" name="percent" size="3">%</td>
            </tr>
            <tr>
                <td align="right">Target Amount:</td><td><input type="text" name="target" size="3"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="Calculate" onclick="calc()"></td>
            <tr>
            <tr>
                <td colspan="2" align="center"><div id="disp" style="color:#ffffff;"></div></td>
            <tr>
        </table>
    </form>
</center>

</body>
</html>

Please be generous and donate credits

**natsuki** · 11-30-2008 04:24 PM

O_O

having a first look at your code if (deposit < target) is suspicious, because the result will always be the same no matter what the amounts are (unless deposit >= target) since you only pass to it once. Then your click should be click(); on the onclick because click alone denotes a variable while click() a function.

If you want to be bug safe then you could add some additional safety checks. in percent for example, you only calculate if percent > 0 else you'll end up in an infinite loop if you ever do looping since deposit will always be less than target if it is already initially so.

Thread: Javascript Help

LinkBack

Thread Tools

Display

Javascript Help

Re: Javascript Help

Re: Javascript Help

Similar Threads

Making a site JavaScript dependent - pros/cons?

drop down menus with JavaScript disabled?

javascript and external javascript files problem

A question about javascript files

XML and Javascript

Posting Permissions