How to reference an array in a function argument

Question

I have a series of arrays that contain words I want to use as text in various HTML divs (there are about 35 of these, I included only a few for brevity).

var bodyplan = ['Anguilliform', 'Compressiform', 'Depressiform', 'Filiform', 'Fusiform', 'Globiform', 'Sagittiform', 'Taeniform'];

var mouthposition = ["Inferior", "Jawless", "Subterminal", "Superior", "Terminal"];

var barbels = ['1', '2', '4 or more'];

var caudalshape = ['Continuous', 'Emarginate', 'Forked', 'Lunate', 'Rounded', 'Truncate'];

I have a switch function that is supposed to change the text based on user selections:

switch(n){
            case 1:
            changelabels(bodyplan, 8);
            break;
            case 2:
            changelabels(mouthposition, 5);
            break;
            case 3:
            changelabels(barbels, 3);
            break;
            case 4:
            changelabels(caudalshape, 6);
            break;
            case 5:
            changelabels(dorsalspines, 8);
            break;
            default:
            alert("handquestsel error")}};

Finally, I have the function which I would like to make the changes (except it doesn't):

function changelabels(opt1,opt2){
    var i = opt2;
    var im = opt2 - 1;
    var c = 1;
    var index = 0;
    while (i>=c){   
        var oldlbl = document.getElementById("rb" + c + "lbl");
        var newlbla = opt1.slice(im,i);
        var newlblb = opt1.toString();
        oldlbl.innerHTML = newlblb; 
        c = c + 1
        index = index + 1
}};

I know the code for my function is just plain wrong at this point, but I have altered it so many times that I'm not sure what's going on anymore. At one point I did have the function able to change the text, but it did so incorrectly (it parsed the name of the array, not extracted a value from the array as I wished). Please help. I know I am overlooking some fundamental concepts here, but am not sure which ones. I've lost count of the hours I've spent trying to figure this out. It's seems like it should be so simple, yet in all my chaotic attempts to make it work, I have yet to stumble on an answer.

EDIT: I want my switch statement to call the function and pass to the function, the appropriate array from which to pull the labels from. The purpose of the app is to help a user learn to identify fish. When the user makes selections on the page, a series of pictures will be shown for various character states with an accompanying label describing the state. For example, when the user selects Mouth Position a series of divs will show the different mouth positions that fish have and have a label below the picture to tell the user what that certain character state is called. I can get the pictures to change just fine, but I am having a hell of a time with the labels.

Answer 1

Why not just something along the lines of:

document.getElementById("bodyplan_label").innerHTML = bodyplan[bodyplan_index];

You seem trying to put everything in really abstract data structures, I see no reason to. Just keep it simple.

Also bodyplan has only 8 elements, so bodyplan[8] will give you an out of bounds exception because arrays start at 0 as is common in all modern programming languages.

Answer 2

If I'm reading your requirement and code correctly, in your switch statement you are passing both a reference to the appropriate array and that array's expected length - you don't need the second parameter because all JavaScript arrays have a .length property .

You don't want to use .slice() to get the individual values out of the array, because that returns a new array copied out of the original - just use arrayVariable[index] to get the individual item at index .

So, putting that together try something like this (with your existing array definitions):

switch(n){
   case 1:
      changelabels(bodyplan);
      break;
   case 2: 
      changelabels(mouthposition);
   // etc.
}

function changelabels(data) {
   var i,
       lbl;

   for (i = 0; i < data.length; i++) {
      lbl = document.getElementById("rb" + (i+1) + "lbl");
      lbl.innerHTML = data[i];
   }
}

Notice how much simpler that is than your code? I'm assuming here the elements you are updating have an id in the format "rb1lbl", "rb2lbl", etc, with numbering starting at 1: I'm getting those ids using (i+1) because JavaScript array indexes start at zero. Note also that you don't even need the lbl variable: you could just say document.getElementById("rb" + (i+1) + "lbl").innerHTML = data[i] - however I've left it in so that we have something to expand on below...

Within your function you seem to be changing the labels on a set of elements (radio button labels?), one per value in the array, but you stop when you run out of array items which means any leftover elements will still hold the values from the previous selection (eg, if the previous selection was "bodyplan" with 8 options and you change to "mouthposition" with only 5 - you probably should hide the 3 leftover elements that would otherwise continue to display the last few "bodyplan" items. One way to do that is instead of setting your loop up based on the array length you could loop over the elements, and if the current element has an index beyond the end of the array hide it, something like this:

function changelabels(data) {
   var i,
       lbl,
       elementCount = 20; // or whatever your element count is

   for (i = 0; i < elementCount; i++) {
      lbl = document.getElementById("rb" + (i+1) + "lbl");
      if (i < data.length) {
         lbl.innerHTML = data[i];
         lbl.style.display = "";
      } else {
         lbl.innerHTML = "";
         lbl.style.display = "none";
      }
   }
}

If these elements are labels for radio buttons (just a guess based on the ids) then you'd also want to hide or show the corresponding radio buttons, but I hope you can figure out how to add a couple of lines to the above to do that.

(As mentioned above, be careful about having element ids count up from 1 when the array indexes start at 0.)

If the above doesn't work please post (at least some of) the relevant HTML - obviously I've just had to guess at what it might be like.

Answer 3

SOLUTION: Changed the scope of the array variables to local by moving them into the function where they are used, instead of having them as global variables at the top of the page. I don't understand as I was following every rule of variable declaration. But for some unknown reason, global variables in javascript are abhorrent.

Solution Edit: Found an error in declaring my global variables. This may have been the source of my problem of why I could not access them. But it is a non-issue at this point since I corrected my code.

Answer 4

I don't understand what your trying to achieve exactly with your code. But to pass a variable (in this case an array) by reference you just have to add "&" before the variable.

function the_name(&$var_by_ref, $var_by_value) {
// Here if you modify $var_by_ref this will change the variable passed to the function.
}

More: http://php.net/manual/en/language.references.pass.php

Hope that helps.