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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.11303 seconds
  • Memory Usage 2,901KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates