A very weird JS error :-)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Keiron Waites
    #1

    A very weird JS error :-)

    Ok to understand what I'm doing you'll have to load the HTML file attached
    (code also below):

    When you select an item on the left and select the ">>" button, some alerts
    will come up telling you what's happening. The first 2 alerts will tell you
    which items are being added to the array arrayFbox. arrayFbox is a
    multidimensiona l array. The values being added are the 2 items that you did
    not select from the left box.

    Next, you will get an alert telling you that 2 items are in arrayFbox
    (arrayFbox.leng th).

    Finally, two more alerts will come up as the script loops through arrayFbox
    to check it. Here is where the error is first seen! If you select People or
    Cartoon both values in the array will be array(5,Garden) or if you select
    Garden both values will be array(4,cartoon ).

    Please tell me why this is happening! I'm pulling my hair out!!

    Thanks,

    Keiron

    The code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Fuckin g Work!!!</title>
    </head>

    <body>
    <SCRIPT LANGUAGE="JavaS cript" type="text/javascript">
    <!--
    // fbox = option moved from, tbox = option moved to.
    function move (fbox,tbox) {
    var arrayFbox = new Array();
    var arrayFboxInside = new Array();
    var arrayTbox = new Array();
    var arrayTboxInside = new Array();
    var i;
    var j;
    var x;
    j = 0;
    x = 0;
    // Create the original fbox list in an array, minus the
    value moved.
    for (i = 0; i < fbox.options.le ngth; i++) {
    // The items moved.
    if (fbox.options[i].selected) {
    arrayTboxInside[0] = fbox.options[i].value;
    arrayTboxInside[1] = fbox.options[i].text;
    if ((tbox.options. length == 1) &&
    (tbox.options[0].value == "")) {
    arrayTbox[0] = arrayTboxInside ;
    }
    else {
    arrayTbox[tbox.options.le ngth+x] =
    arrayTboxInside ;
    }
    x++;
    arrayTboxInside .splice(0);
    }
    // The items not moved.
    else {
    arrayFboxInside[0] = fbox.options[i].value;
    arrayFboxInside[1] = fbox.options[i].text;
    arrayFbox[j] = arrayFboxInside ;
    arrayFboxInside .splice(0);
    alert("arrayFbo x["+j+"] values as I add them
    to arrayFbox: "+arrayFbox[j][0]+", "+arrayFbox[j][1]);
    j++;
    }
    }
    alert("arrayFbo x Length: "+arrayFbox.len gth);
    for (i=0; i < arrayFbox.lengt h; i++) {
    alert("arrayFbo x["+i+"] values after I have finished
    adding them to arrayFbox: "+arrayFbox[i][0]+", "+arrayFbox[i][1]);
    }
    }
    // -->
    </script>

    <form name="form" method="post" action="custome r-content.php?add ">
    <table cellspacing="0" cellpadding="5" >
    <tr>
    <td class="main_bod y"><select
    name="list1" multiple style="width:15 0; height: 150;"
    onchange="docum ent.form.list2. selectedIndex='-1';">

    <option value="3">Peopl e</option>

    <option value="4">Carto on</option>

    <option value="5">Garde n</option>

    </select>
    </td>
    <td align="center"> <input
    type="button" value=" &gt;&gt; "
    onClick="move(t his.form.list1, this.form.list2 )"><br>
    <input type="button" value="
    &lt;&lt; " onClick="move(t his.form.list2, this.form.list1 )"></td>
    <td><select name="list2" multiple
    style="width:15 0; height: 150;" onchange="list_ content.innerHT ML='<img
    src=images/customer_images/thumb-'+imageDetails[this.form.list1 .selectedInde
    x]+' border=1><br>'+ imageTitles[this.form.list2 .selectedIndex];
    document.form.l ist1.selectedIn dex='-1';"></select></td>
    </tr>
    </table>
    </form>



    </body>
    </html>




    Tags: None
    • Oz
      #2
      Re: A very weird JS error :-)

      Oops you're making a simple mistake

      your code reads:

      arrayFboxInside[0] = fbox.options[i].value;
      arrayFboxInside[1] = fbox.options[i].text;
      arrayFbox[j] = arrayFboxInside ;
      arrayFboxInside .splice(0);

      The problem is that you keep setting the arrayFbox[j] values to refence the same object (arrayFboxInsid e), and you keep changing the same params of thay array (0 and 1). Did you notice that the value that keeps poping up is the last value in the option box (5, Garden)? This is becuase it is the last value that was written into arrayFboxInside[0] and arrayFboxInside[1].

      The simple fix is to create new arrayFboxInside objects each time you loop so your else statement will look like:

      var arrayFboxInside = new Array();
      arrayFboxInside[0] = fbox.options[i].value;
      arrayFboxInside[1] = fbox.options[i].text;
      arrayFbox[j] = arrayFboxInside ;

      or a simplier syntax would look like

      arrayFbox[j] = [fbox.options[i].value, fbox.options[i].text];

      Note: you have the same problem in your if statement



      "Keiron Waites" <webmaster@NOSP AMsharemonkey.c om> wrote in message news:bn66ij$2je $1@sparta.btint ernet.com...
      Ok to understand what I'm doing you'll have to load the HTML file attached
      (code also below):

      When you select an item on the left and select the ">>" button, some alerts
      will come up telling you what's happening. The first 2 alerts will tell you
      which items are being added to the array arrayFbox. arrayFbox is a
      multidimensiona l array. The values being added are the 2 items that you did
      not select from the left box.

      Next, you will get an alert telling you that 2 items are in arrayFbox
      (arrayFbox.leng th).

      Finally, two more alerts will come up as the script loops through arrayFbox
      to check it. Here is where the error is first seen! If you select People or
      Cartoon both values in the array will be array(5,Garden) or if you select
      Garden both values will be array(4,cartoon ).

      Please tell me why this is happening! I'm pulling my hair out!!

      Thanks,

      Keiron

      The code:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>
      <head>
      <title>Fuckin g Work!!!</title>
      </head>

      <body>
      <SCRIPT LANGUAGE="JavaS cript" type="text/javascript">
      <!--
      // fbox = option moved from, tbox = option moved to.
      function move (fbox,tbox) {
      var arrayFbox = new Array();
      var arrayFboxInside = new Array();
      var arrayTbox = new Array();
      var arrayTboxInside = new Array();
      var i;
      var j;
      var x;
      j = 0;
      x = 0;
      // Create the original fbox list in an array, minus the
      value moved.
      for (i = 0; i < fbox.options.le ngth; i++) {
      // The items moved.
      if (fbox.options[i].selected) {
      arrayTboxInside[0] = fbox.options[i].value;
      arrayTboxInside[1] = fbox.options[i].text;
      if ((tbox.options. length == 1) &&
      (tbox.options[0].value == "")) {
      arrayTbox[0] = arrayTboxInside ;
      }
      else {
      arrayTbox[tbox.options.le ngth+x] =
      arrayTboxInside ;
      }
      x++;
      arrayTboxInside .splice(0);
      }
      // The items not moved.
      else {
      arrayFboxInside[0] = fbox.options[i].value;
      arrayFboxInside[1] = fbox.options[i].text;
      arrayFbox[j] = arrayFboxInside ;
      arrayFboxInside .splice(0);
      alert("arrayFbo x["+j+"] values as I add them
      to arrayFbox: "+arrayFbox[j][0]+", "+arrayFbox[j][1]);
      j++;
      }
      }
      alert("arrayFbo x Length: "+arrayFbox.len gth);
      for (i=0; i < arrayFbox.lengt h; i++) {
      alert("arrayFbo x["+i+"] values after I have finished
      adding them to arrayFbox: "+arrayFbox[i][0]+", "+arrayFbox[i][1]);
      }
      }
      // -->
      </script>

      <form name="form" method="post" action="custome r-content.php?add ">
      <table cellspacing="0" cellpadding="5" >
      <tr>
      <td class="main_bod y"><select
      name="list1" multiple style="width:15 0; height: 150;"
      onchange="docum ent.form.list2. selectedIndex='-1';">

      <option value="3">Peopl e</option>

      <option value="4">Carto on</option>

      <option value="5">Garde n</option>

      </select>
      </td>
      <td align="center"> <input
      type="button" value=" &gt;&gt; "
      onClick="move(t his.form.list1, this.form.list2 )"><br>
      <input type="button" value="
      &lt;&lt; " onClick="move(t his.form.list2, this.form.list1 )"></td>
      <td><select name="list2" multiple
      style="width:15 0; height: 150;" onchange="list_ content.innerHT ML='<img
      src=images/customer_images/thumb-'+imageDetails[this.form.list1 .selectedInde
      x]+' border=1><br>'+ imageTitles[this.form.list2 .selectedIndex];
      document.form.l ist1.selectedIn dex='-1';"></select></td>
      </tr>
      </table>
      </form>



      </body>
      </html>



        Comment

        Previous template Next
        Working...