Need A Bit Of Help

MikeUK · 02-19-2013, 08:27 PM

Hi all
I am trying to teach myself some basic javascript coding and have created a little calculator. It works great in Google Chrome but won't work in any other browser.
I have spent ages going through it correcting errors and trying things I have learnt but I'm going no where fast.
I suspect Google is very tolerant of code errors whilst Firefox and IE are not.
I would really appreciate if someone has the time to cast their eye over what I've done and point me in the right direction.....just bear in mind I'm a real beginner.

Here's what I've done - sorry if it is really messy code but basically its the functions a form and table layout to display everything.

Thanks

MikeUK

Code:

<!DOCTYPE html>
<html>
<head>

<script language="javascript" type="text/javascript">
var form = document.getElementById('myForm');
var Total = document.form.elements.box1.value * document.form.elements.box2.value *

document.form.elements.box4.value = total.toFixed(2);

var Total2 = document.form.elements.box1.value * document.form.elements.box2.value *

document.form.elements.box4.value = total2.toFixed(2);

var Total3 = (document.form.elements.box1.value * document.form.elements.box2.value *

document.form.elements.box4.value) - (document.form.elements.box1.value *

document.form.elements.box2.value * document.form.elements.box4.value ) = total3.toFixed();

function Total(form) {

//code goes here

//declare variables and assign box1 and box2.

var form_field1 = Number(form.box1.value);

var form_field2 = Number(form.box2.value);

var form_field3 = Number(form.box3.value);

var form_field4 = Number(form.box4.value);

var form_field5 = Number(form.box5.value);


//add the variables and update the total field value with the result.

form.total.value = ((((form_field1 * form_field2 * form_field4) / 1000) * form_field5) *

28).toFixed(2);


}

function Total2(form) {

//code goes here

//declare variables and assign box1 and box2.

var form_field7 = Number(form.box1.value);

var form_field8 = Number(form.box2.value);

var form_field9 = Number(form.box3.value);

var form_field10 = Number(form.box4.value);

var form_field11 = Number(form.box5.value);


//add the variables and update the total field value with the result.

form.total2.value = ((((form_field7 * form_field9 * form_field10) / 1000) * form_field11) *

28).toFixed(2);



}

function Total3(form) {

//code goes here

//declare variables and assign box1 and box2.

var form_field13 = Number(form.box1.value);

var form_field14 = Number(form.box2.value);

var form_field15 = Number(form.box3.value);

var form_field16 = Number(form.box4.value);

var form_field17 = Number(form.box5.value);


//add the variables and update the total field value with the result.

form.total3.value = (((((form_field13 * form_field14 * form_field16) / 1000) * form_field17) * 28) -

((((form_field13 * form_field15 * form_field16) / 1000) * form_field17) * 28)).toFixed();





}

</script>
</head>
<body>
<table border="0" width="450">
<tbody>
<tr>
<!-- Row 1 --> <td width="100%">
<div align="center">
<p style="width: 451px; font-family: Century Gothic;"><span
style="font-weight: bold; font-style: normal; text-decoration: none; font-size: 14pt;">What
Savings Can
You Give Me? </span></p>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<form id="myForm" name="myForm">
<table
style="vertical-align: middle; text-align: left; width: 460px; height: 285px;"
border="4" cellpadding="0" cellspacing="0">
<tbody>
<tr style="font-family: Lucida Sans; color: white;">
<td colspan="2" rowspan="1"
style="border: medium none ; vertical-align: middle; height: 15px;">
<div
style="text-align: center; vertical-align: middle; background-color: rgb(51, 204, 0);"><span
style="font-weight: bold;">
SAVINGS
ESTIMATOR</span> </div>
</td>
</tr>
<tr>
<td
style="vertical-align: top; width: 340px; font-family: Lucida Sans;"><small>
</small>
<div style="margin-left: 5px;"><small>How many units are you
thinking of buying? </small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="5" maxlength="5"
name="box1" value="1" type="text"> </td>
</tr>
<tr>
<td style="vertical-align: top; font-family: Lucida Sans;"><small>
</small>
<div style="margin-left: 5px;"><small>What
power are the units? </small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="5" maxlength="5"
name="box2" value="60" type="text"> </td>
</tr>
<tr>
<td style="vertical-align: top; font-family: Lucida Sans;"><small>
</small>
<div style="margin-left: 5px;"><small>What
power are the units you are considering? </small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="5" maxlength="5"
name="box3" value="5" type="text"> </td>
</tr>
<tr>
<td style="vertical-align: top; font-family: Lucida Sans;"><small>
</small>
<div style="margin-left: 5px;"><small>How
many hours are they run per
day? </small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="5" maxlength="5"
name="box4" value="5" type="text"> </td>
</tr>
<tr>
<td style="vertical-align: top; font-family: Lucida Sans;"><small>
</small>
<div style="margin-left: 5px;"><small>What does
your electricity cost per
KWh (£)? </small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="5" maxlength="5"
name="box5" value="0.12" type="text"> </td>
</tr>
<tr>
<td colspan="2" rowspan="1" valign="top" align="center"; font-family: Lucida Sans;"><br>
<small>&nbsp; </small><input
onclick="Total(form);Total2(form);Total3(form)"
value="Click Here To Calculate Savings" type="button">
<br><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; font-family: Lucida Sans; background-color: silver; font-weight: bold;"><small>
</small>
<div style="margin-left: 5px;"><small>Cost
per month with existing units (£)<br>
</small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="8" maxlength="8"
name="total" type="text"><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; font-family: Lucida Sans; background-color: silver; font-weight: bold;"><small>
</small>
<div style="margin-left: 5px;"><small>Cost
per month with new units (£)<br>
</small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="8" maxlength="8"
name="total2" type="text"><br>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="vertical-align: top; font-family: Lucida Sans;"><small>&nbsp; </small><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; font-family: Lucida Sans; background-color: rgb(51, 204, 0);"><small>
</small>
<div
style="margin-left: 5px; background-color: rgb(51, 204, 0);"><small><big
style="color: white;"><span style="font-weight: bold;">Estimated
Energy Savings
per month (£)</span></big><br>
</small></div>
<small> </small></td>
<td style="vertical-align: top;"><input size="8" maxlength="8"
name="total3" type="text"><br>
</td>
</tr>
<tr>
<td
style="vertical-align: top; font-family: Lucida Sans; background-color: white;"
rowspan="1" colspan="2">
<div style="margin-left: 5px;"><font
style="color: rgb(153, 153, 153);" size="-1"><span
style="font-family: Lucida Sans;"><br>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</form>
<br>
</body>
</html>

Philip M · 02-19-2013, 08:55 PM

You have a variable and a function both with the same name - Total.
Same with Total2 and Total3.

It does indeed work in Chrome - but I am surprised!

Why not name the form field values var ff13 or whatever rather than the long-winded var form_field13? Extra typing!

You can trap NaN entries with
var ff1 = Number(form.box1.value) || 0;

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Old Pedant · 02-19-2013, 09:00 PM

This doesn't make any sense, to me:

Code:

var form = document.getElementById('myForm');
var Total = document.form.elements.box1.value * document.form.elements.box2.value;

form is now already a reference to your <form>.

So the code should be simply:

Code:

var form = document.getElementById('myForm');
var Total = form.box1.value * form.box2.value;

and so on.

Old Pedant · 02-19-2013, 09:02 PM

Oh, I see.

*ALL* of THIS CODE is total trash and is doing *NOTHING* on that page except getting errors:

Code:

var form = document.getElementById('myForm');
var Total = document.form.elements.box1.value * document.form.elements.box2.value *

document.form.elements.box4.value = total.toFixed(2);

var Total2 = document.form.elements.box1.value * document.form.elements.box2.value *

document.form.elements.box4.value = total2.toFixed(2);

var Total3 = (document.form.elements.box1.value * document.form.elements.box2.value *

document.form.elements.box4.value) - (document.form.elements.box1.value *

document.form.elements.box2.value * document.form.elements.box4.value ) = total3.toFixed();

But it doesn't matter, because the functions work and they are actually the only code you need.

Remove all of the above code. It is doing nothing whatsoever.

Philip M · 02-19-2013, 09:12 PM

Quote:

Originally Posted by Old Pedant

Oh, I see.

*ALL* of THIS CODE is total trash and is doing *NOTHING* on that page except getting errors:
But it doesn't matter, because the functions work and they are actually the only code you need.

Remove all of the above code. It is doing nothing whatsoever.

Yes, that is the reason for it not working. I still don't know why it worked in Chrome.

Why are you calling three separate functions?
That results in a lot of duplication and pointless repetition which is very confusing:-

var form_field1 = Number(form.box1.value);
var form_field7 = Number(form.box1.value);
var form_field13 = Number(form.box1.value);

But box1 is really meaningless - why not give it a descriptive name such as "units"? And "hours" instead of box4? And so on for all your fields.

In short, your code could be greatly simplified and also clarified.

MikeUK · 02-19-2013, 10:17 PM

Thanks all for your input - I'm going to take onboard the feedback and rewrite the code to make it cleaner and easier to follow. Also need to revisit the javascript documents I was learning from and work out where I fell over.

Thanks again

MikeUK