TAFE Student - Check my javascript.. line 31 int 40

goldy30

goldy30

New Member
Messages
60
Reaction score
0
Points
0
I thought I had it right but I've got an error where there is only text in a <td>... so have a look and tell me what ever is wrong with it.. as a whole.

HTML: 
<HTML>
<HEAD>
<TITLE>Fuel Economy</TITLE>

<script type="text/javascript">
function updatesum()
{
if (document.form1.dist.value=="")
{
alert("Fill in the distance");
}
if (document.form1.fuel.value=="")
{
alert("Fill in the Fuel");
}
if (document.form1.cost.value=="")
{
alert("What is the cost of fuel?");
}

var dist = (document.form1.dist.value);
var fuel = (document.form1.fuel.value);
var cost = (document.form1.cost.value);

var total = fuel*cost;
var kmplt = dist/fuel;
var ltpdist = fuel/dist * 100;
var mpg = (dist * 0.621) / (fuel * 0.624);

document.write("<center><table border="1" bgcolor="gray"><tr><td>Total cost</td><td>$" + total.toFixed(2) + "</td><td rowspan="4" valign="middle"><b>Calculate<br>Fuel Economy</b></td></tr>");
document.write("<tr><td>Kilometers per litre used</td><td>" + kmplt.toFixed(2) + "</td></tr>");
document.write("<tr><td>Fuel consumed</td><td>" + ltpdist.toFixed(2) + "</td></tr>");
document.write("<tr><td>Miles per gallon travelled</td><td>" + mpg.toFixed(2) + "</td></tr></table></center>");
}
</script>

</HEAD>

<BODY bgcolor="lightblue">

<center>

<form name="form1">
<table border="1" cellpadding="10" bgcolor="gray">

<tr>
<td>Distance traveled </td><td><input name="dist" size="5"> km</td><td rowspan="3" bgcolor="white"><center><font face="arial"><b>Calculate<br>Fuel Economy</b></font></center></td>
</tr>
<tr>
<td>Fuel used </td><td><input name="fuel" size="5"> per litre</td>
</tr>
<tr>
<td>Fuel cost </td><td><input name="cost" size="5"> per litre</td>
</tr>

<tr>
<td colspan="3">
<input type="button" value="Calculate" onClick="updatesum">
<input type="reset" value="Reset">



</td>
</tr>
</font>
</table>

</form>
</center>

</BODY>
</HTML>
I appreciate any help.
 
N

Nahid_hossain

New Member
Messages
28
Reaction score
0
Points
0
There are two mistakes.

1. The code is
<input type="button" value="Calculate" onClick="updatesum">
will be
<input type="button" value="Calculate" onClick="updatesum()">


2.
The code is
HTML: 
document.write("<center><table border="1" bgcolor="gray"><tr><td>Total cost</td><td>$" + total.toFixed(2) + "</td><td rowspan="4" valign="middle"><b>Calculate<br>Fuel Economy</b></td></tr>");

will be
HTML: 
document.write("<center><table border=\"1\" bgcolor=\"gray\"><tr><td>Total cost</td><td>$" + total.toFixed(2) + "</td><td rowspan=\"4\" valign=\"middle\"><b>Calculate<br>Fuel Economy</b></td></tr>");
 
Last edited:
Scoochi2

Scoochi2

New Member
Messages
185
Reaction score
0
Points
0
goldy30 said:
HTML: 
document.write("<center><table border="1" bgcolor="gray"><tr><td>Total cost</td><td>$" + total.toFixed(2) + "</td><td rowspan="4" valign="middle"><b>Calculate<br>Fuel Economy</b></td></tr>");
Click to expand...
An example of a major error is above. You're using double quotes for your document.write, but also for the HTML. When you use a double quote in the HTML, it ends our JS write...
The easiest solution is to use single quotes. Either for the JS or the HTML within it- doesn't matter which.
Or you could escape all the quotes which is the best way. So it should look like this:
HTML: 
document.write("<center><table border=\"1\" bgcolor=\"gray\"><tr><td>Total cost</td><td>$" + total.toFixed(2) + "</td><td rowspan=\"4\" valign=\"middle\"><b>Calculate<br>Fuel Economy</b></td></tr>");
You also have an error in the actual text. Should the 'fuel used' be xxx per litre??? If I drive a mile, I didn't use 0.1 per litres of fuel. I used 0.1 litre of fuel :p

EDIT: meh. Took too long to reply :D
 
Last edited:
N

Nahid_hossain

New Member
Messages
28
Reaction score
0
Points
0
I think some other things should also be fixed. I'm pasting full code here:

HTML: 
<HTML>
<HEAD>
<TITLE>Fuel Economy</TITLE>

<script type="text/javascript">
function updatesum()
{
if (document.form1.dist.value=="")
{
alert("Fill in the distance");
}
else if (document.form1.fuel.value=="")
{
alert("Fill in the Fuel");
}
else if (document.form1.cost.value=="")
{
alert("What is the cost of fuel?");
}
else
{

var dist = (document.form1.dist.value);
var fuel = (document.form1.fuel.value);
var cost = (document.form1.cost.value);

var total = fuel*cost;
var kmplt = dist/fuel;
var ltpdist = fuel/dist * 100;
var mpg = (dist * 0.621) / (fuel * 0.624);

document.write("<center><table border=\"1\" bgcolor=\"gray\"><tr><td>Total cost</td><td>$" + total.toFixed(2) + "</td><td rowspan=\"4\" valign=\"middle\"><b>Calculate<br>Fuel Economy</b></td></tr>");
document.write("<tr><td>Kilometers per litre used</td><td>" + kmplt.toFixed(2) + "</td></tr>");
document.write("<tr><td>Fuel consumed</td><td>" + ltpdist.toFixed(2) + "</td></tr>");
document.write("<tr><td>Miles per gallon travelled</td><td>" + mpg.toFixed(2) + "</td></tr></table></center>");

}}
</script>

</HEAD>

<BODY bgcolor="lightblue">

<center>

<form name="form1">
<table border="1" cellpadding="10" bgcolor="gray">

<tr>
<td>Distance traveled </td><td><input name="dist" size="5"> km</td><td rowspan="3" bgcolor="white"><center><font face="arial"><b>Calculate<br>Fuel Economy</b></font></center></td>
</tr>
<tr>
<td>Fuel used </td><td><input name="fuel" size="5"> per litre</td>
</tr>
<tr>
<td>Fuel cost </td><td><input name="cost" size="5"> per litre</td>
</tr>

<tr>
<td colspan="3">
<input type="button" value="Calculate" onClick="updatesum()">
<input type="reset" value="Reset">



</td>
</tr>
</font>
</table>

</form>
</center>

</BODY>
</HTML>
 
goldy30

goldy30

New Member
Messages
60
Reaction score
0
Points
0
Thanks once again! I understand and have noted the errors I've made, I've corrected the mistakes and it all works properly now.

You guys are great..... Thanx.
 
You must log in or register to reply here.
Top