dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Two problems with Javascript code

  1. #1
    Join Date
    Mar 2011
    Posts
    43

    Two problems with Javascript code

    There's 2 problems i'm having with this code.

    1. foodArray is a multidimensional array that is initialized with 13 elements at the start. When i load the page, the body onload event calls the fillTable function, which fills the table with the first 5 elements of foodArray. If i then click the next button in the bottom right corner, it shows the next
    5 elements of foodArray by again calling the fillTable function, incrementing page variable by 1. If I press next a 3rd time it shows the last 3 items of foodArray, but it does not overwrite the last 2 rows of the output table that were filled with the previous second call to the fillTable function. This should happen because there are no elements in foodArray[13] and foodArray[14], and i tried to write the fillTable function to detect when the array is undefined and output dashes instead. How do i fix the fillTable function to overwrite these last 2 rows when the array is empty? the fillTable function seems to be crashing when it reaches these last 2 rows.

    2. The second problem is simpler. Each add button in the table has a unique id defined by the fillTable function. When i click on one of these buttons, its supposed to call function add, which is supposed to turn the table cell with the add button clicked to a yellow background. what's wrong with it?

    Thanks in advance, G
    <!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>Untitled Document</title>

    <style type="text/css">
    #content1 {
    position: absolute;
    right: 10px;
    z-index: 1;
    top: 100px;
    }
    </style>

    <link href="basicstyle.css" rel="stylesheet" type="text/css" />
    <link href="advancestyle.css" rel="stylesheet" type="text/css" />
    <link href="tablestyle.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

    var food1 = new Array("-", "100% Parmesan Cheese", "Kraft", "Dairy & Alternatives", "2 Tbsp", "12g", 45, 2.5, 1.5, 0.1, 5, 230, 1, 0, 0, 5);
    var food2 = new Array("-", "100% Whole wheat bread", "Dempsters", "Grain Products", "2 slices", "71g", 180, 2, 0.5, 0, 0, 240, 33, 4, 3, 7);
    var food3 = new Array("-", "Canned Cut Asparagus", "Selection", "Fruit & Vegetables", "1/2 cup", "125mL", 25, 0.3, 0, 0, 0, 260, 4, 2, 2, 2);
    var food4 = new Array("-", "Chinese Fried Rice", "Uncle Ben's Fast & Fancy", "Grain Products", "1/4 package", "42g", 150, 0.5, 0.2, 0, 0, 370, 33, 1, 1, 3);
    var food5 = new Array("-", "Cooked Turkey Breast", "Pillar's", "Meat & Alternatives", "2 slices", "40g", 40, 0.5 ,0.3, 0, 20, 460, 1, 0, 1 ,8);
    var food6 = new Array("-", "Diet Coke", "Coke", "Beverages", "-", "250mL", 0, 0, 0, 0, 0, 35, 0, 0, 0, 0.1, "-");
    var food7 = new Array("-", "Honey Nut O's Cereal", "Selection", "Grain Products", "3/4 cup", "30g", 120, 0.5, 0, 0, 0, 150, 26, 2, 12, 2);
    var food8 = new Array("-", "Hot dogs", "Schneider's", "Meat & Alternatives", "1 wiener", "37g", 120, 10, 3.5, 0.1, 20, 410, 2, 0, 0, 5);
    var food9 = new Array("-", "Milk Chocolate Crispie Joys", "Harry London", "Treats", "About 4", "40g", 190, 10, 6, 0, 5, 55, 26, "<1g", 18, 3);
    var food10 = new Array("-", "Mozzarella cheese", "Black Diamond", "Dairy & Alternatives", "1/4 inch cube", "30g", 110, 8, 5, 0.2, 25, 230, 1, 0, 0, 8);
    var food11 = new Array("-", "Pancake and Waffle Mix", "Selection", "Grain Products", "1/3 cup", "34g", 120, 1.5, 0.4, 0, 15, 510, 23, 1, 3, 3);
    var food12= new Array("-", "Rancher's Choice Calorie Wise", "Kraft", "Oils & Fats", "1 Tbsp.", "15mL", 35, 2.5, 0.4, 0, 5, 170, 3, 0, 1, 0.1);
    var food13 = new Array("-", "Strawberry Cereal Bars", "Selection", "Grain Products", "1 bar", "38g", 130, 2.5, 0.2, 0, 5, 210, 25, 3, 10, 2);

    var foodArray = [food1, food2, food3, food4, food5, food6, food7, food8, food9, food10, food11, food12, food13];
    var resultArray = [ [ ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];
    var arrayToSearch = [ [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];

    var arrayRows;
    var arrayColumns;
    var outputTableRows;
    var outputTableColumns;

    var page = 1;
    var resultCount = 0;

    function fillTable( arr, p ) {
    //fill the output table with whatever array is passed to it in form of arr parameter.
    outputTableRows = 5;
    outputTableColumns = 16;

    for (var x = 0; x < outputTableRows; x++) {

    var xPage = (x + 5 * (p - 1));

    for (var y = 0; y < outputTableColumns; y++) {
    //set id variable in order to refer to each cell in the output table by this id.
    var id = x + "_" + y;

    if ( (arr[xPage][y] != undefined) ) {
    //if its the first column, put in a button, or else put in the resultArray[x][y] value in the output table cell.
    if (y == 0)
    document.getElementById(id).innerHTML = "<input id=\"b" + id + "\" type=\"button\" value=\"add\" onclick=\"add()\">";
    else
    document.getElementById(id).innerHTML = arr[xPage][y];
    //else if the resultArray entry is undedefined, just put in a dash in the output table cell.
    } else {
    document.getElementById(id).innerHTML = "-";
    }
    }
    }
    }

    // why wont this work????????????????????????????????????????
    function add( e ) {
    alert("Add");
    if (!e)
    var e = window.event;
    var callerId = this.id;
    alert(callerId);
    this.parent.style.backgroundColor = "yellow";
    }


    function searchArray() {
    //search the array containing all database food items (foodArray), a 2 dimensional array.
    //find array entries that match search results.
    //put search results into 2 dimesional array foodArray.
    //display foodArray in output table.

    //re-intitialize resultArray to empty it, and resultCount to 0.
    var resultArray = [ [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];
    var arrayToSearch = [ [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];

    resultCount = 0;
    page = 1;

    //get search terms.
    food = document.getElementById("foodsearch").value;
    brand = document.getElementById("brandsearch").value;
    foodType = document.getElementById("foodtypesearch").value;

    //set rows and columns dynamiically and for the output table
    //this uses foodArray to start.
    //only works if all rows of foodArray have the correct length, because always uses the first row to count length.
    arrayRows = foodArray.length;
    arrayColumns = foodArray[0].length;

    outputTableRows = 5;
    outputTableColumns = 16;

    //if a search term is entered for food
    if (food != "") {
    //for each row in the foodArray table
    for (var x = 0; x < arrayRows; x++) {
    //search the second column of each foodArray item for the search term.
    var result = foodArray[x][1].indexOf(food);
    //if a match was found, put the result into a new row for resultArray referred to by resultCount.
    if (result != -1) {
    for (var y = 0; y < arrayColumns; y++) {
    resultArray[resultCount][y] = foodArray[x][y];
    }
    resultCount += 1;
    }
    }
    fillTable( resultArray, page );
    }

    //if a search term is entered for brand
    if (brand != "") {
    //for each row in the foodArray table
    for (var x = 0; x < arrayRows; x++) {
    //search the second column of each foodArray item for the search term.
    var result = foodArray[x][2].indexOf(brand);
    //if a match was found, put the result into a new row for resultArray referred to by resultCount.
    if (result != -1) {
    for (var y = 0; y < arrayColumns; y++) {
    resultArray[resultCount][y] = foodArray[x][y];
    }
    resultCount += 1;
    }
    }
    fillTable ( resultArray, page );
    }

    //if a search term is entered for foodType
    if (foodType != "") {
    //for each row in the foodArray table
    for (var x = 0; x < arrayRows; x++) {
    //search the second column of each foodArray item for the search term.
    var result = foodArray[x][3].indexOf(foodType);
    //if a match was found, put the result into a new row for resultArray referred to by resultCount.
    if (result != -1) {
    for (var y = 0; y < arrayColumns; y++) {
    resultArray[resultCount][y] = foodArray[x][y];
    }
    resultCount += 1;
    }
    }
    fillTable ( resultArray, page );
    }
    }

    function resetSearch() {
    page = 1;
    fillTable ( foodArray, page );
    document.getElementById("foodsearch").value = "";
    document.getElementById("brandsearch").value = "";
    document.getElementById("foodtypesearch").value = "";
    }

    function start() {
    alert("Start pressed");
    page = 1;
    fillTable ( foodArray, page );
    }

    function last() {
    alert("Last");
    page -= 1;
    fillTable ( foodArray, page );
    }

    function next() {
    alert("Next");
    page += 1;
    fillTable ( foodArray, page );
    }

    function end() {
    alert("End");
    page = 3;
    fillTable ( foodArray, page );
    }


    </script>

    </head>

  2. #2
    Join Date
    Mar 2011
    Posts
    43
    <body onload="fillTable( foodArray, 1 )">

    <div id="dcontainer" class="type3div">

    <div id="dheader" class="type2div">
    <div id="dlogo" class="type1div"></div>
    <div id="dlogin" class="type1div"></div>
    </div>

    <div id="dmenubar" class="type2div">
    <a href=""><div id="dmenu1" class="navigation">Page 1</div></a>
    <a href=""><div id="dmenu2" class="navigation">Page 2</div></a>
    <a href=""><div id="dmenu3" class="navigation">Page 3</div></a>
    <a href=""><div id="dmenu4" class="navigation">Page 4</div></a>
    <a href=""><div id="dmenu5" class="navigation">Page 5</div></a>
    </div>

    <div id="dcontent" class="type2div">

    <h1>Grocery Store Aisle 1: Select food items from a database</h1>

    <div id="content1" class="type1div">
    <div id="legend">
    <table border="1">
    <tr>
    <td colspan="2" align="center"><b>Legend</b></td>
    </tr>
    <tr>
    <td>SS = Serving Size</td><td>Sod = Sodium</td>
    </tr>
    <tr>
    <td>Cal = Calories</td><td>Carb = Carbohydrate</td>
    </tr>
    <tr>
    <td>Fat = Fat</td><td>Fib = Carbohydrate: Fibre</td>
    </tr>
    <tr>
    <td>Sat = Fat: Saturated</td><td>Sug = Carbohydrate: Sugars</td>
    </tr>
    <tr>
    <td>Trans = Fat: Trans</td><td>Pro = Protein</td>
    </tr>
    <tr>
    <td>Chol = Cholesterol</td><td style="background-color: yellow">Items in yellow are already in your fridge</td>
    </tr>
    </table>
    </div>
    </div>

    <div id="content2" class="type1div">
    <div id="search">
    <h2>Search Aisle 1</h2>
    <form id="form1" name="form1" method="post" action="">
    <table border="1">
    <tr>
    <td>Food:</td>
    <td><input id="foodsearch" type="text" size="30" /></td>
    </tr>
    <tr>
    <td>Brand:</td>
    <td><input id="brandsearch" type="text" size="30" /></td>
    </tr>
    <tr>
    <td>Food Type:</td>
    <td><input id="foodtypesearch" type="text" size="30" /></td>
    <tr>
    <td colspan="2" align="right">
    <input id="resetsearch" type="button" size="20" value="Reset Search" onclick="resetSearch()" />
    <input id="gosearch" type="button" size="20" value="Search" onclick="searchArray()" />
    </td>
    </tr>
    </table>
    </form>
    </div>
    </div>

    <div id="content3" class="type1div">
    <h2>Results</h2>

    <div id="table1" class="outputTable">

    <table border="1">
    <thead>
    <tr>
    <th class="tableHeadMediumCenter">Edit</th>
    <th class="tableHeadLargeLeft">Food</th>
    <th class="tableHeadLargeLeft">Brand</th>
    <th class="tableHeadLargeLeft">Food Type</th>
    <th class="tableHeadLargeLeft">Serving Amount</th>
    <th class="tableHeadSmallCenter">SS</th>
    <th class="tableHeadSmallCenter">Cal</th>
    <th class="tableHeadSmallCenter">Fat</th>
    <th class="tableHeadSmallCenter">Sat</th>
    <th class="tableHeadSmallCenter">Trans</th>
    <th class="tableHeadSmallCenter">Chol</th>
    <th class="tableHeadSmallCenter">Sod</th>
    <th class="tableHeadSmallCenter">Carb</th>
    <th class="tableHeadSmallCenter">Fib</th>
    <th class="tableHeadSmallCenter">Sug</th>
    <th class="tableHeadSmallCenter">Pro</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td id="0_0" class="tableCellCenterTop">-</td>
    <td id="0_1" class="tableCellLeftTop">-</td>
    <td id="0_2" class="tableCellLeftTop">-</td>
    <td id="0_3" class="tableCellLeftTop">-</td>
    <td id="0_4" class="tableCellLeftTop">-</td>
    <td id="0_5" class="tableCellCenterTop">-</td>
    <td id="0_6" class="tableCellCenterTop">-</td>
    <td id="0_7" class="tableCellCenterTop">-</td>
    <td id="0_8" class="tableCellCenterTop">-</td>
    <td id="0_9" class="tableCellCenterTop">-</td>
    <td id="0_10" class="tableCellCenterTop">-</td>
    <td id="0_11" class="tableCellCenterTop">-</td>
    <td id="0_12" class="tableCellCenterTop">-</td>
    <td id="0_13" class="tableCellCenterTop">-</td>
    <td id="0_14" class="tableCellCenterTop">-</td>
    <td id="0_15" class="tableCellCenterTop">-</td>
    </tr>
    <tr>
    <td id="1_0" class="tableCellCenterTop">-</td>
    <td id="1_1" class="tableCellLeftTop">-</td>
    <td id="1_2" class="tableCellLeftTop">-</td>
    <td id="1_3" class="tableCellLeftTop">-</td>
    <td id="1_4" class="tableCellLeftTop">-</td>
    <td id="1_5" class="tableCellCenterTop">-</td>
    <td id="1_6" class="tableCellCenterTop">-</td>
    <td id="1_7" class="tableCellCenterTop">-</td>
    <td id="1_8" class="tableCellCenterTop">-</td>
    <td id="1_9" class="tableCellCenterTop">-</td>
    <td id="1_10" class="tableCellCenterTop">-</td>
    <td id="1_11" class="tableCellCenterTop">-</td>
    <td id="1_12" class="tableCellCenterTop">-</td>
    <td id="1_13" class="tableCellCenterTop">-</td>
    <td id="1_14" class="tableCellCenterTop">-</td>
    <td id="1_15" class="tableCellCenterTop">-</td>
    </tr>
    <tr>
    <td id="2_0" class="tableCellCenterTop">-</td>
    <td id="2_1" class="tableCellLeftTop">-</td>
    <td id="2_2" class="tableCellLeftTop">-</td>
    <td id="2_3" class="tableCellLeftTop">-</td>
    <td id="2_4" class="tableCellLeftTop">-</td>
    <td id="2_5" class="tableCellCenterTop">-</td>
    <td id="2_6" class="tableCellCenterTop">-</td>
    <td id="2_7" class="tableCellCenterTop">-</td>
    <td id="2_8" class="tableCellCenterTop">-</td>
    <td id="2_9" class="tableCellCenterTop">-</td>
    <td id="2_10" class="tableCellCenterTop">-</td>
    <td id="2_11" class="tableCellCenterTop">-</td>
    <td id="2_12" class="tableCellCenterTop">-</td>
    <td id="2_13" class="tableCellCenterTop">-</td>
    <td id="2_14" class="tableCellCenterTop">-</td>
    <td id="2_15" class="tableCellCenterTop">-</td>
    </tr>
    <tr>
    <td id="3_0" class="tableCellCenterTop">-</td>
    <td id="3_1" class="tableCellLeftTop">-</td>
    <td id="3_2" class="tableCellLeftTop">-</td>
    <td id="3_3" class="tableCellLeftTop">-</td>
    <td id="3_4" class="tableCellLeftTop">-</td>
    <td id="3_5" class="tableCellCenterTop">-</td>
    <td id="3_6" class="tableCellCenterTop">-</td>
    <td id="3_7" class="tableCellCenterTop">-</td>
    <td id="3_8" class="tableCellCenterTop">-</td>
    <td id="3_9" class="tableCellCenterTop">-</td>
    <td id="3_10" class="tableCellCenterTop">-</td>
    <td id="3_11" class="tableCellCenterTop">-</td>
    <td id="3_12" class="tableCellCenterTop">-</td>
    <td id="3_13" class="tableCellCenterTop">-</td>
    <td id="3_14" class="tableCellCenterTop">-</td>
    <td id="3_15" class="tableCellCenterTop">-</td>
    </tr>
    <tr>
    <td id="4_0" class="tableCellCenterTop">-</td>
    <td id="4_1" class="tableCellLeftTop">-</td>
    <td id="4_2" class="tableCellLeftTop">-</td>
    <td id="4_3" class="tableCellLeftTop">-</td>
    <td id="4_4" class="tableCellLeftTop">-</td>
    <td id="4_5" class="tableCellCenterTop">-</td>
    <td id="4_6" class="tableCellCenterTop">-</td>
    <td id="4_7" class="tableCellCenterTop">-</td>
    <td id="4_8" class="tableCellCenterTop">-</td>
    <td id="4_9" class="tableCellCenterTop">-</td>
    <td id="4_10" class="tableCellCenterTop">-</td>
    <td id="4_11" class="tableCellCenterTop">-</td>
    <td id="4_12" class="tableCellCenterTop">-</td>
    <td id="4_13" class="tableCellCenterTop">-</td>
    <td id="4_14" class="tableCellCenterTop">-</td>
    <td id="4_15" class="tableCellCenterTop">-</td>
    </tr>
    </tbody>
    </table>

    </div>

    <div id="scroll">
    <span onclick="start()">‹‹Start</span>
    <span onclick="last()">‹Last</span>
    <span onclick="next()">Next›</span>
    <span onclick="end()">End››</span>
    </div>

    </div>


    </div>

    </div>

    </body>

    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles