Why are some values in my array undefined

Question

I have a for loop in php that adds a number of checkboxes on my page that look like this

<input type="checkbox" name="checkbox[]">

I want to use javascript to check which is checked and add value in an Array

var cboxes = document.getElementsByName('checkbox[]');
var len = cboxes.length;
var imageArray = new Array();

for (var i = 0; i < len; i++) {
    if (cboxes[i].checked) {
        imageArray[i] = cboxes[i].value;
    } 
}

If I have 50 boxes and click the checkbox number 2,4 and 6, loops through my array, I get the result.

for(var i = 0; i < imageArray.length; i++){
    gallery.innerHTML += imageArray[i] + "<br>";
}

--

undefined
Correct value
undefined
Correct value
undefined
Correct value

If I check number 1, 2, 3 I get the result

Correct value
Correct value
Correct value

Why do I get undefined when I skip a checkbox? How do I fix it

@rab is there anything wrong with the synatx: `imageArray[i]`? — Rajesh Paul, Nov 06 '13 at 09:22
@RajeshPaul The syntax is fine, it just doesn't do what they want. The value of `i` isn't necessarily the position in `imageArray` where they want to place the value when there are gaps between checked checkboxes. — Anthony Grist, Nov 06 '13 at 09:25

score 7 · Answer 1 · answered Nov 06 '13 at 09:18

This is because you are adding extra elements to an array. Take this code, for instance:

var a = []; // empty array
a[1] = 'foo'; // don't set a[0]

console.log(a.length); // gives 2

Javascript will always "fill in" gaps in the list of array keys. If you miss some out, Javascript will fill in the blanks with undefined.

Rather than adding the element to your array by the key name, just push it onto the end of the array:

imageArray.push(cboxes[i].value);

score 1 · Answer 2 · answered Nov 06 '13 at 09:18

You get undefined because you're skipping indexes in imageArray. If the first checkbox isn't checked, it won't put anything in index 0, then because the second checkbox is checked, the first entry is placed into index 1.

When you iterate it doesn't skip those missed indexes if there is an index with a value after it, they just don't have a set value so it comes back as undefined.

You could change this line:

imageArray[i] = cboxes[i].value;

to:

imageArray.push(cboxes[i].value);

That way it won't skip indexes when there are unchecked checkboxes.

score 0 · Answer 3 · answered Nov 06 '13 at 09:19

It's because you're setting the value of imageArray[i] only when the corresponding checkbox is checked. If you check checkboxes 2, 4 and 6, you're essentially doing this:

imageArray[1] = cboxes[1].value;
imageArray[3] = cboxes[3].value;
imageArray[5] = cboxes[5].value;

imageArray[0], [2] and [4] are never being set, and thus are undefined.

To fix this, either make use of push() to push the values into the imageArray, or simply set dummy values for non-matching keys:

    for (var i = 0; i < len; i++) {
        if (cboxes[i].checked) {
            imageArray[i] = cboxes[i].value;
        } else {
            imageArray[i] = "";
        }
    }

The result:

imageArray[0] = "";
imageArray[1] = cboxes[1].value;
imageArray[2] = "";
imageArray[3] = cboxes[3].value;
imageArray[4] = "";
imageArray[5] = cboxes[5].value;

Alternatively using push():

    for (var i = 0; i < len; i++) {
        if (cboxes[i].checked) {
            imageArray.push(cboxes[i].value);
        }
    }

The result:

imageArray[0] = cboxes[1].value;
imageArray[1] = cboxes[3].value;
imageArray[2] = cboxes[5].value;

score 0 · Answer 4 · answered Nov 06 '13 at 09:20

0

try this

var cboxes = document.getElementsByName('checkbox[]');
var imageArray =[];

for (var i = 0, len = cboxes.length ; i < len; i++) {
    if (cboxes[i].checked) {
        imageArray.push(cboxes[i].value );
    } 
}

answered Nov 06 '13 at 09:20

rab

4,134
1
29
42

score 0 · Answer 5 · answered Nov 06 '13 at 09:31

You are setting the imageArray with respect to the variable i,

the loop is executing each time and hence it is setting undefined value for those elements in the array that are not set,

you should use a different loop variable, and increase its value only on successful condition.

Try modifying loop as below.

        var j=0;
        for (var i = 0; i < len; i++) {
            if (cboxes[i].checked == true) {
                imageArray[j] = cboxes[i].value;
                j++;
            }
        }

Why are some values in my array undefined

5 Answers5

Linked