PDA

View Full Version : problem with document.getElementById('');

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>
<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>

<body>

<script type="text/javascript">
var num_rows=prompt("How many rows?","");
draw_table(num_rows)
</script>

<form id="myform">
<table id="mytable">
<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.

Kor
04-15-2006, 07:50 AM
you must append your rows to the tbody, not to the table element. You node should be

document.getElementById('mytable').getElementsByTagName('tbody')[0]

On the other hand, I guess that you should be consistent, and use DOM 1 methods all over. Use createElement() and appendChild() methods to create rows and cells and append them as well.

Kor
04-15-2006, 08:08 AM
On the other hand, there is an error down there. You see, almost all the attributes and methods return strings as values, not numbers, so that your num_rows variable is a string, not a number. You must transform it in a number:

while (c_ount<Number(num_rows))

Here's a basic example of using DOM 1 to build a table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var nrR=prompt('How many ROWS?');
var nrC=prompt('How many CELLS in a ROW?');
var root = document.getElementById('mydiv');
var oTab = document.createElement('table');
oTab.setAttribute('border','1');
var oTbo = document.createElement('tbody');
for(var i=0;i<Number(nrR);i++){
var oTr = document.createElement('tr');
for(var j=0;j<Number(nrC);j++){
var oTd = document.createElement('td');
oTd.appendChild(document.createTextNode(i+' | '+j))
oTr.appendChild(oTd)
}
oTbo.appendChild(oTr)
}
oTab.appendChild(oTbo);
root.appendChild(oTab)
}

</script>
<body>
<div id="mydiv"></div>
</body>
</html>

nathan_lamothe
04-15-2006, 08:28 AM
Thank you so much for your help Kor!

I am looking through your table closely, and learning from it.
It is, however, 1:30 in the morning here, so I am getting slow.

I suspect I will be back tomorrow morning with more questions before I get this done, but you've at least got me to the point where I can see the light at the end of the tunnel...

Thanks again!
Nathan

nathan_lamothe
04-16-2006, 10:22 PM
Got it nailed.

Thanks again for your help Kor!