nathan_lamothe
04-15-2006, 05:24 AM
New to javascript. Some html/css experience.
First post here, after searching for a bit. Hope I'm in the right part of the forum, if not, please advise where I should be asking this.
For a course I am taking I've been asked the following:
A parking garage charges a $2.00 minimum fee to park for up to three hours. It charges an additional $0.50 per hour for each hour or part thereof in excess of three hours. The maximum charge for any given 24-hour period is $10.00. Assume that no car parks for longer than 24 hours at a time. Write a script that calculates and displays the parking charges for each customer who parked a car in this garage yesterday. You should input from the user the hours parked for each customer. The program should display the charge for the current customer and should calculate and display the running total of yesterday's receipts. The program should use the function calculateCharges to determine the charge for each customer. Use HTML form to obtain the input from the user.
I'm sure I could do this with prompts in a loop, but using forms threw me or something. I came up with the following:
A prompt for the number of vehicles, sent to a function which draws a table with a number of rows equal to the prompt response. Each row would have (at this point) two columns.
The first column (column 0) of the table would have a number (vehicle number, customer number, whatever) used to name & id the row.
The second column (column 1) would have a text input allowing the user to enter the number of hours the car was in the lot.
A "calculate" button at the bottom of the table which would call the mandatory "calculateCharges" function.
calculateCharges() would loop through the rows, taking the value from the text inputs to perform the necessary math, then would add two more cells to each row, the first (column 2) with the charge for that vehicle, the second (column 3) with a running total for the day.
So far I have the following (no fourth column yet):
<html>
<head>
<script type="text/javascript">
function draw_table()
{
var tbl=document.getElementById('mytable');
var c_ount=0
while (c_ount<num_rows){
var row=tbl.insertRow(c_ount);
var cellnumb=row.insertCell(0);
var text_cn=document.createTextNode('row number '+c_ount);
cellnumb.appendChild(text_cn);
var formcell=row.insertCell(1);
var f_orm=document.createElement('input');
f_orm.type='text';
f_orm.name='inp_'+c_ount;
f_orm.id='inp_'+c_ount;
f_orm.size=2;
formcell.appendChild(f_orm);
c_ount-c_ount+1;
}
}
function calculate()
{
var tbl2=document.getElementById('mytable');
var c_ount2=0;
while (c_ount2<num_rows){
var val_1=document.getElementById('inp_'+c_ount2).value;
var val_2=val_1*2;
var row2=tbl2.insertRow(c_ount2);
var result_cell=row2.insertCell(2);
var text_v2=document.createTextNode(val_2);
result_cell.appendChild(text_v2);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var num_rows=prompt("How many rows?","");
draw_table(num_rows)
</script>
<form id="myform">
<table id="mytable">
<thead><tr><th>Row number</th><th>Text input</th><th>input time 2</th><th>running total of column 3</th></tr></thead>
<tbody>
</tbody>
</table>
<input type="button" onclick="calculate()" value="Submit">
</form>
</body>
and I get "t_able has no properties" on the first line of the "do" loop. I presume I have made an error in the original var t_able= call, but am not sure what.
I assume I have the same problem with the other document.getElementById statements and I am being kicked out before them right?
I can't tell if I'm doing the rest of it even close to right until I get that fixed.
Any help (including of the "give up man its much easier to do that 'thisway'" kind :o ) is much appreciated.
First post here, after searching for a bit. Hope I'm in the right part of the forum, if not, please advise where I should be asking this.
For a course I am taking I've been asked the following:
A parking garage charges a $2.00 minimum fee to park for up to three hours. It charges an additional $0.50 per hour for each hour or part thereof in excess of three hours. The maximum charge for any given 24-hour period is $10.00. Assume that no car parks for longer than 24 hours at a time. Write a script that calculates and displays the parking charges for each customer who parked a car in this garage yesterday. You should input from the user the hours parked for each customer. The program should display the charge for the current customer and should calculate and display the running total of yesterday's receipts. The program should use the function calculateCharges to determine the charge for each customer. Use HTML form to obtain the input from the user.
I'm sure I could do this with prompts in a loop, but using forms threw me or something. I came up with the following:
A prompt for the number of vehicles, sent to a function which draws a table with a number of rows equal to the prompt response. Each row would have (at this point) two columns.
The first column (column 0) of the table would have a number (vehicle number, customer number, whatever) used to name & id the row.
The second column (column 1) would have a text input allowing the user to enter the number of hours the car was in the lot.
A "calculate" button at the bottom of the table which would call the mandatory "calculateCharges" function.
calculateCharges() would loop through the rows, taking the value from the text inputs to perform the necessary math, then would add two more cells to each row, the first (column 2) with the charge for that vehicle, the second (column 3) with a running total for the day.
So far I have the following (no fourth column yet):
<html>
<head>
<script type="text/javascript">
function draw_table()
{
var tbl=document.getElementById('mytable');
var c_ount=0
while (c_ount<num_rows){
var row=tbl.insertRow(c_ount);
var cellnumb=row.insertCell(0);
var text_cn=document.createTextNode('row number '+c_ount);
cellnumb.appendChild(text_cn);
var formcell=row.insertCell(1);
var f_orm=document.createElement('input');
f_orm.type='text';
f_orm.name='inp_'+c_ount;
f_orm.id='inp_'+c_ount;
f_orm.size=2;
formcell.appendChild(f_orm);
c_ount-c_ount+1;
}
}
function calculate()
{
var tbl2=document.getElementById('mytable');
var c_ount2=0;
while (c_ount2<num_rows){
var val_1=document.getElementById('inp_'+c_ount2).value;
var val_2=val_1*2;
var row2=tbl2.insertRow(c_ount2);
var result_cell=row2.insertCell(2);
var text_v2=document.createTextNode(val_2);
result_cell.appendChild(text_v2);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var num_rows=prompt("How many rows?","");
draw_table(num_rows)
</script>
<form id="myform">
<table id="mytable">
<thead><tr><th>Row number</th><th>Text input</th><th>input time 2</th><th>running total of column 3</th></tr></thead>
<tbody>
</tbody>
</table>
<input type="button" onclick="calculate()" value="Submit">
</form>
</body>
and I get "t_able has no properties" on the first line of the "do" loop. I presume I have made an error in the original var t_able= call, but am not sure what.
I assume I have the same problem with the other document.getElementById statements and I am being kicked out before them right?
I can't tell if I'm doing the rest of it even close to right until I get that fixed.
Any help (including of the "give up man its much easier to do that 'thisway'" kind :o ) is much appreciated.