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> </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>
Before you post, read our: 
