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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having problems getting my table to display

    I'm having to write a program in javascript that appends a html table to show numerical values... Here is my code which I'm stuck at...

    Code:
    <!DOCYTYPE html>
    <html>
    <head><title>Numeric Bases</title>
    <style type="text/css">
        body { padding: 2em; margin: 0px auto; background-color: white; color: #222; font-family: "Helvetica", "Arial", sans-serif;}
        h1 {border-bottom: 1px solid #aaa; text-align: center; }
        p#countdown { font-size: 150px; text-align: center; margin: 0; padding: 0;}
        table { width: 50%; margin: 0 auto; }
        caption { font-size: xx-large; font-weight: bold; }
        thead > tr {background-color: #aaa; }
        td, th { text-align: center; padding: 1em; border: 1px solid #ccc; }
        tr.alternate { background-color: #eee; }
    </style>
    <script type="text/javascript" src="num-bases1.js"></script>
    </head>
    
    
    <table>
        <caption>Numerical values in various bases</caption>
        <thead><tr><th>Dec</th><th>Binary</th><th>Octal</th><th>Hex</th></tr></thead>
        <tbody></tbody>
    </table>
    
    
    </body></html>
    Code:
     /*
     * The following function should generate table cells
     * that contain an integer (in base 10), and its equivalent
     * in Binary (base 2), Octal (base 8), and Hexidecimal (base 16).
     */
    var num_bases = function(max_number) {
        
         output = '';
        
        for ( var count = 1; count <= max_number; count++){
            var binary = count.toString(2);
            var octal = count.toString(8);
            var hex = count.toString(16);
        
         output += '<tr><td>' + count + '</td><td>' + binary + '</td><td>' + octal + '</td><td>' +
            hex + '</td></tr><tr class="alternate"><td colspan="4"></td></tr>'; 
        }    
        // TODO: 
        // Write a for loop that appends HTML for the 
        // table row and cells to the output. 
        //
        // The following is an example of a table row:
        //
        //      <tr> <td>4</td> <td>100</td> <td>4</td> <td>4</td> </tr>
        //
        // Every other row should have an "alternate" class:
        //       
        //      <tr class="alternate">
            
        document.getElementById('num-bases').innerHTML = output;
    
    }
    window.onload = function() {
        num_bases(50);
        
        }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    document.getElementById('num-bases').innerHTML = output;

    You don't HAVE any element on your page with the id "num-bases".

    And doing this via innerHTML is a bad thing, anyway.

    And you clearly misunderstood the directions about "alternate".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh, and you are missing the <body> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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