/    Sign up×
Community /Pin to ProfileBookmark

filter problem

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: [url]http://www.mediafire…dv4um63v7q4hp2s[/url]
I have also added the pdf describing the steps in solving this problem here: [url]http://www.mediafire.com/?o583677otuk5s6w[/url]
Here is a picture of the page:

This is the Javascript code:

[CODE]
/*
New Perspectives on Javascript
Tutorial 10
Case Problem 2
Author:
Date:
Filename: filter.js

Function List:
resetTable()
Resets the data table, displaying all table rows
countRecords()
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
filter()
Filters the data table based on the values selected in the drop-down
selection lists. Also updates the record count.
init()
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 == “”))
rowCount++;
}
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;)
{
//alert(cCell.tagName);
if (cCell.tagName == “TD”){
cellCount++;
if (cellCount == cellNum) {
checkCell(cCell,filterText);
}
}
}
}
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”){
findCell(cRow,cellNum,filterText);
}
}
}
function filter(){
resetTable();
var allSelects = document.getElementsByTagName(‘select’);
for (var i = 0; i < allSelects.length; i++){
var filterText = allSelects[i].options[allSelects[i].selectedIndex].text;
if (filterText != “”){
filterTable(i+1,filterText);
}
}
countRecords();

}
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();
}
countRecords();
}
[/CODE]

This is the HTML: [url]http://pastebin.com/RXX5kx7e[/url]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @M2G spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...