Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2006
    Location
    Joussard, Alberta
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with document.getElementById('');

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

    Code:
    <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 ) is much appreciated.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    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">
    onload = function(){
    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>
    </head>
    <body>
    <div id="mydiv"></div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Apr 2006
    Location
    Joussard, Alberta
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Apr 2006
    Location
    Joussard, Alberta
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it nailed.

    Thanks again for your help Kor!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •