A friend asked me to help him with some homework from a javascript couse he's taking.
I have followed the instructions in the book and wrote the code.
The page has some digital camera displayed in a table. The javascript code must implement some filters so that when they are selected, the content of the page changes and shows just the cameras which respect the chosen filters.
The problem is that when I select a filter, nothing happnes and I can't figure out why.
I don't know if the handlers for the dropdown lists are not correctly added or there is a problem with one of the functions.
I'm fluent in Java, C# and VB but I can't figure out what is the problem in this case.
Could you help me fix this code?
I have zipped all the files needed for this exercise and you can't download them from here: http://www.mediafire...dv4um63v7q4hp2s
I have also added the pdf describing the steps in solving this problem here: http://www.mediafire.com/?o583677otuk5s6w
Here is a picture of the page:

This is the Javascript code:
New Perspectives on Javascript
Tutorial 10
Case Problem 2
Filename: filter.js

Function List:
     Resets the data table, displaying all table rows
     Contains the number of visible rows in the data table, displaying the
     total in the "records" table cell
checkCell(cell, filterText)
     If the inner content of the table cell does not equal the text string
     filterText, hides the table row of which the table cell is part.
findCell(row, cellNum, filterText)
     Loops through the table cells within a table row moving from the
     first cell to the last, until it finds the cellNum cell.
filterTable(cellNum, filterText)
     Hides a table row if the content of the cellNum table cell does not equal
     the value of filterText
     Filters the data table based on the values selected in the drop-down
     selection lists. Also updates the record count.
     Initiates the Web page creating event handlers for each select element
     and counting the number of records in the data table
function resetTable(){
var allRows = document.getElementsByTagName('tr');
for (var i = 0; i<allRows.length; i++){
allRows[i].style.display = "";
function countRecords(){
var headRow = document.getElementById("titleRow");
var rowCount = 0;
for (var cRow = headRow.nextSibling; cRow = cRow.nextSibling;)
if ((cRow.tagName == "TR") && (cRow.style.display == ""))
var recordsVal = document.getElementById('records');
recordsVal.innerHTML = rowCount;
function checkCell(cell, filterText){
if(cell.innerHTML != filterText){
cell.parentNode.style.display = 'none';
function findCell(row, cellNum, filterText){
var cellCount = 0;
for (var cCell = row.nextSibling; cCell = cCell.nextSibling;)
if (cCell.tagName == "TD"){
if (cellCount == cellNum) {
function filterTable(cellNum, filterText){
var headRow = document.getElementById("titleRow");
for (var cRow = headRow.nextSibling; cRow = cRow.nextSibling;)
//alert(cRow.tagName); Aici da TR si undefined
if (cRow.tagName == "TR"){
function filter(){
var allSelects = document.getElementsByTagName('select');
for (var i = 0; i < allSelects.length; i++){
var filterText = allSelects[i].options[allSelects[i].selectedIndex].text;
if (filterText != ""){

function init(){
var allSelects = document.getElementsByTagName('select');
for (var i = 0; i < allSelects.length; i++){
//allSelects[i].addEventListener('change', filter(), true);
allSelects[i].onchange = filter();
This is the HTML: http://pastebin.com/RXX5kx7e