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

    Need Radio Button Help ASAP!!!

    Ok so I am trying to get this page up and running but I can't get the Javascript to work. Can somebody please take a look at my page and explain exactly what to do? I am new to Javascript. Please don't mind the song list, they are just there temporarily.

    The exact instructions are on the page at the bottom in the <p> tag named "instructions". Thanks in advance for the help. I really need to get this finished asap!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hybrid 2 Assignment</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    #wrapper{
    width:800px;
    margin:10px auto;
    }
    h1{
    font:normal 2.0em "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 1.0em 2.0em;
    }
    p{
    padding: 1.0em 2.0em;
    font:normal 1.0em/1.2em Verdana, Geneva, sans-serif;
    color: #03C;
    }
    table{
    width: 700px;
    margin: auto;
    border:1px solid #999;
    border-collapse:collapse;
    }
    caption{
    color:#03C;
    font: normal 1.6em Verdana, Geneva, sans-serif;
    }
    thead tr{
    background-color:#eee;
    }
    th{
    font:bold 12pt Verdana, Geneva, sans-serif;
    color: #333;
    padding: 0.5em 2em;
    text-align:center;
    }
    td{
    font:normal 12pt Verdana, Geneva, sans-serif;
    color: #666;
    padding: 0.5em 2em;
    text-align:left;
    border:1px solid #999;
    border-left:none;
    border-right:none;
    }

    .sample{
    background-color:#00FFFF;

    }

    .odd{
    background-color:#fff;
    }
    .even{
    background-color:#ddd;
    }
    .selected{
    background-color:#9C6;
    }
    </style>

    <script>

    window.onload = init;

    </script>
    </head>

    <body>
    <div id="wrapper">
    <h1>Sample Download Page</h1>
    <form name="songForm" id="songForm" action="#" method="post">
    <table>
    <caption>Available Downloads</caption>
    <thead>
    <tr>
    <th>&nbsp;</th>
    <th>Track</th>
    <th>Artist</th>
    <th>File Size</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td colspan="4">
    <input type="submit" name="btnDownload" id="btnDownload" value="Download Selected Songs" />
    </td>
    </tr>
    </tfoot>
    <tbody>
    <tr class="odd">
    <td><input type="checkbox" name="song_1" id="song_1" value="1" /></td>
    <td>The Adventure</td>
    <td>Angels and Airwaves</td>
    <td>3433 Kb</td>
    </tr>
    <tr class="even">
    <td><input type="checkbox" name="song_2" id="song_2" value="2" /></td>
    <td>Black Fire</td>
    <td>Dragonforce</td>
    <td>4010 Kb</td>
    </tr>
    <tr class="odd">
    <td><input type="checkbox" name="song_3" id="song_3" value="3" /></td>
    <td>Always</td>
    <td>Blink 182</td>
    <td>3877 Kb</td>
    </tr>
    <tr class="even">
    <td><input type="checkbox" name="song_4" id="song_4" value="4" /></td>
    <td>When Your Heart Stops Beating</td>
    <td>plus 44</td>
    <td>4123 Kb</td>
    </tr>
    <tr class="odd">
    <td><input type="checkbox" name="song_5" id="song_5" value="5" /></td>
    <td>Anyway You Want It</td>
    <td>Journey</td>
    <td>3914 Kb</td>
    </tr>
    <tr class="even">
    <td><input type="checkbox" name="song_6" id="song_6" value="6" /></td>
    <td>Read My Mind</td>
    <td>The Killers</td>
    <td>3649 Kb</td>
    </tr>
    <tr class="odd">
    <td><input type="checkbox" name="song_7" id="song_7" value="7" /></td>
    <td>Rebel Yell</td>
    <td>Billy Idol</td>
    <td>3871 Kb</td>
    </tr>
    <tr class="even">
    <td><input type="checkbox" name="song_8" id="song_8" value="8" /></td>
    <td>Nine in the Afternoon</td>
    <td>Panic at the Disco</td>
    <td>3255 Kb</td>
    </tr>
    <tr class="odd">
    <td><input type="checkbox" name="song_9" id="song_9" value="9" /></td>
    <td>Lazy Eye</td>
    <td>Silversun Pickups</td>
    <td>3568 Kb</td>
    </tr>
    </tbody>
    </table>
    </form>
    <p><strong>Instructions: </strong> When the user clicks a checkbox then the background of the row has it's colour changed by adding a CSS class. If they click a checkbox and unselect it then the background of the table row will revert to it's original colour. When the user clicks the Download button then an alert box should pop up and display a list of the song titles in the selected rows.</p>
    </div>
    </body>
    </html>

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Seeing as this is your first post, welcome to the forums. Being that it is your first post, I strongly recommend you read the 'how to post a JavaScript question' sticky thread. Pay special attention to #3 on that list. Also note that putting "ASAP!!!!" in your subject doesn't garner much respect with people, and dumping what is obviously a homework assignment even less.

    At any rate, what you want to do is use the DOM to alter the elements on the page using an onclick event handler. I suggest searching for some tutorials and doing plenty of reading / troubleshooting. When you have some actual code that you want help debugged, let us know.


  •  

    Posting Permissions

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