Student - Use document.getElementById("").innerHTML with if else statement

**goldy30** · 10-08-2008 09:23 AM

I do not have anyone else to ask, I'm still on holidays and am once again turning here for help so I would appreciate any help and less criticism.

1.

I was trying to use else if to display if the application calculates the over or under budget but it's only displaying you are under budget even when I've put in a greater amount in the expenditure??

HTML Code:

    if (intotal > extotal)
    {
    document.getElementById("budget").innerHTML = "You are under Budget";
    }
    else 
    {
    document.getElementById("budget").innerHTML = "YOU ARE OVER BUDGET!";
    }

2.

It's not calculating properly. I think it has something to do with the regexp.

HTML Code:

function toNum(str)
    {
        var p = /^[0-9]*\.?[0-9]+\s*$/; // a better number check can be done using regexp
        return p.test(str) ? parseFloat(str) : 0;
        //return (isNaN(str) || str == "") ? 0 : parseFloat(str);
    }

...and here is the whole code.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
body{
    font-family:arial;
    font-size:10pt;
    background-color:#024393;
}
table td{
    background-color:#ffffff;
    padding:10px;
}
</style>

<script type="text/javascript">
function calc()
{
    var salary, social, gifts, other, food, electric, phone;
    var otherincome, water, loans, other1, other2, intotal, extotal, total;

    var salary = toNum(document.form1.salary.value);
    var social = toNum(document.form1.social.value);
    var gifts = toNum(document.form1.gifts.value);
    var otherincome = (document.form1.otherincome.value);

    var food = toNum(document.form1.food.value);
    var electric = toNum(document.form1.electric.value);
    var phone = toNum(document.form1.phone.value);
    var rent = toNum(document.form1.rent.value);
    var water = toNum(document.form1.water.value);
    var loans = toNum(document.form1.loans.value);
    var other1 = toNum(document.form1.phone.value);
    var other2 = toNum(document.form1.other2.value);

    var intotal = salary + social + gifts + otherincome;
    var extotal = food + electric + phone + rent + water + loans + other1 + other2;

    var total = intotal - extotal;

document.form1.total.value = total.toFixed(2);

if (intotal > extotal)
    {
    document.getElementById("budget").innerHTML = "You are under Budget";
    }
else 
    {
    document.getElementById("budget").innerHTML = "YOU ARE OVER BUDGET!";
    }

function toNum(str)
    {
        var p = /^[0-9]*\.?[0-9]+\s*$/; // a better number check can be done using regexp
        return p.test(str) ? parseFloat(str) : 0;
        //return (isNaN(str) || str == "") ? 0 : parseFloat(str);
    }
}


</script>

</HEAD>

<BODY>
<center>
<form name="form1">

<table border="1">
<tr>
    <td colspan="2"><b>Income</b></td ><td colspan="2"><b>Expenditure</b></td>
</tr>
<tr>
    <td>Salary:</td><td><input name="salary" size="10" value="0"></td>
    <td>Food:</td><td><input name="food" size="10" value="0"></td>
</tr>
<tr>
    <td>Social Security: </td><td><input name="social" size="10" value="0"></td>
    <td>Electricity: </td><td><input name="electric" size="10" value="0"></td>
</tr>
<tr>
    <td>Gifts: </td><td><input name="gifts" size="10" value="0"></td>
    <td>Phone: </td><td><input name="phone" size="10" value="0"></td>
</tr>
<tr>
    <td>Other: </td><td><input name="otherincome" size="10" value="0"></td>
    <td>Rent: </td><td><input name="rent" size="10" value="0"></td>
</tr>
    <tr>
    <td colspan="2" rowspan="4" valign="top" bgcolor="white">
    <b>Calculate your house budget</b><p>
    <center><span id="budget"></span></center>

    </td><td>Water:</td><td><input name="water" size="10" value="0"></td>
</tr>        

<tr>
    <td>Loans: </td><td><input name="loans" size="10" value="0"></td>
</tr>
<tr>
    <td>Other: </td><td><input name="other1" size="10" value="0"></td>
</tr>
<tr>
    <td>Other: </td><td><input name="other2" value="0" size="10"></td>
</tr>
<tr>
    <td colspan="2"><input type="button" value="Calculate" onClick="calc()">&nbsp;
    <input type="reset" value="Clear">    </td>
    <td colspan="2"><input name="total" value="$0.00" size="">
    </td>
    
</tr>
</table>

</form>
</center>
</BODY>
</HTML>

**xmakina** · 10-08-2008 10:13 AM

Something I always find helpful when I'm debugging is to keep echo/printing variables as I go. That way I can spot problems quicker. You may find that some numbers are not being processed as they should

**natsuki** · 10-08-2008 11:38 AM

follow what xmakina said, it is what i was supposed to say too XD
and.. you are redeclaring your vars too much.. like you used
var blah;
then did
var blah = blah;
You don't need to add var again after you've already declared it. Just
blah = blah;
I really don't know what happens if you redeclare the vars like what you're doing.
Try to add in

Code:

alert("intotal = " + intotal + " extotal = " + extotal);
if (intotal > extotal)
{
blah..

In PHP I actually use exit(blah); instead of echo to debug. ^^

EDIT: found the problem

Code:

var otherincome = (document.form1.otherincome.value);....
    var loans = toNum(document.form1.loans.value);
    var other1 = toNum(document.form1.phone.value);
    var other2 = toNum(document.form1.other2.value);

You forgot toNum() it, that's why the value is concatenated instead: 1 + "0" = "10"
and then you used phone 2 times where you should have used other1?

You if else statement doesn't contain every condition possible try to add an else if statement like:

Code:

if (intotal > extotal)
    {
    document.getElementById("budget").innerHTML = "You are under Budget";
    }
else if (intotal == extotal)
{
	document.getElementById("budget").innerHTML = "You are balanced.";
}
else
    {
    document.getElementById("budget").innerHTML = "YOU ARE OVER BUDGET!";
    }

Is really intotal > extotal an overbudget?..
Sometimes a very simple mistake ends up looking like a big problem. You need to study harder, try to solve your own problems until your head bursts out, or.. nah don't do that. XD

**goldy30** · 10-08-2008 07:32 PM

Thanks... I looked over it several times and began to think that maybe there was something wrong with the way I'd done it... like you said I'd declared too many var's... but in the end what I'd done, even with all the var's I'd declared, it works perfectly once I fixed up the toNum... the extra phone would have caused a problem if I'd used the other1 but I was checking it by entering 1000 in income and 1001 or 999 in expendature.

I'm really happy cause of the help I've had off this forum has made me understand a lot about javascript... I pretty much had it except for (toNum), but by 3am I'm just wanting to bloody get it out of the way.

Thanks!

I'll scan the next one's I do more thoroughly.

**dickey** · 10-08-2008 11:07 PM

Also I believe your logic is reversed.

should be (extotal > intotal)

**idontknow95129** · 10-08-2008 11:10 PM

Originally Posted by xmakina

Something I always find helpful when I'm debugging is to keep echo/printing variables as I go. That way I can spot problems quicker. You may find that some numbers are not being processed as they should

I third that idea. When one of my scripts break, I just keep echoing the variables to see what messes up.

**goldy30** · 10-09-2008 12:11 AM

Originally Posted by dickey

Also I believe your logic is reversed.

should be (extotal > intotal)

I did actually have it the other way around but I changed it back and forth to see if it was going to print properly.

Thread: Student - Use document.getElementById("").innerHTML with if else statement

LinkBack

Thread Tools

Display

Student - Use document.getElementById("").innerHTML with if else statement

Re: Student - Use document.getElementById("").innerHTML with if else statement

Re: Student - Use document.getElementById("").innerHTML with if else statement

Re: Student - Use document.getElementById("").innerHTML with if else statement

Re: Student - Use document.getElementById("").innerHTML with if else statement

Re: Student - Use document.getElementById("").innerHTML with if else statement

Re: Student - Use document.getElementById("").innerHTML with if else statement

Similar Threads

TAFE STUDENT - PHP - Send mail - Verify feilds

if statement question

Hell Explained By Chemistry Student

Former teacher's aide accused of sex with student

Posting Permissions