Getting javascript error with a for loop even though it's working

Question

I'm trying to check a series of check boxes depending on the results I get from a string. Since the values in this string are separated by commas I do the following:

var busLines = 'AB, CD, EF, GH, IJ, KL'
var temp = busLines.split(', ');

So now my array 'temp' should be the individual elements of my string:

temp[0] = 'AB'
temp[1] = 'CD'
temp[2] = 'EF'
and etc...

Each one of those values that are being returned in my array of 'temp' correspond with a check box with the same ID. So when I loop through and value 'AB' comes up, the check box id='AB' will get checked.

That is why I try this:

for (var i = 0; i < temp.length; i++) {
 document.getElementById(temp[i]).checked = true;
}

When I test it out id does exactly what I want it to do, but it gives me the following error:

Message: 'document.getElementById(...)' is null or not an object Line: 530 Char: 9

I don't understand why I am getting an error when what I want it to do works. Any suggestions?

• Wiseguy: What's in busLines? What's in temp[i]? Do you have an element on your page that has an ID of temp[i]? Please add all relevant info.
• Tuan: Maybe you have fewer HTML elements than array elements?
• Alex Wayne: That call to new Array() is not useful. Just assign the result of the split directly. var temp = busLines.split(', ');
• rshivers: Alex you're right, thanks for the heads up.

Answer 1

Most likely you have an ID that wasn't found on the page. You should be coding this defensively anyway, by adding in null checks and such.

Try something like this:

for (var i = 0; i < temp.length; i++) {
 var checkBox = document.getElementById(temp[i]);
 if(checkBox) {
 checkBox.checked = true;
 }
}

• jfriend00: @rshivers - why not fix the real problem here and either remove the bad item from the temp array or fix the missing item in the HTML. You shouldn't have this error in the first place. This just adds a bandaid to it rather than fix the actual source of the error.
• Jordan: I agree with @jfriend00 about fixing the source of the error. However, this sort of coding practice should always be implemented.
• rshivers: Anything I can do to fix the source of my error is much appreciated, that's why I edited my question with more details.

Answer 2

That means one of your IDs doesn't exist (or possibly there's an extra "," at the end of your string. You should make sure all the IDs exist. If you just want to ignore the error, you can wrap your call to getElementById in a try/catch.

• jfriend00: @jbabey - what's wrong with using a try/catch too handle expected or unexpected errors?
• jbabey: @jfriend00 the case of document.getElementById returning null is to be expected and handled properly by conditional checks. using exceptions and exception handlers for non-exceptional cases to control program flow is a bad practice in any language.
• jfriend00: @jbabey - This particular example is a trivial case because error checking is only needed in one line of the code, but I've written code that would require 20 or 30 error checks to appropriately handle all possible errors from errors in unknown content, but one simple try/catch around the outer loop handled all of them much simpler and more foolproof. I don't understand why exception handling in JS gets labeled as bad practice. It can be very, very useful and more foolproof in some cases.
• jbabey: @jfriend00 handling exceptions is not a bad practice at all. using exception handling to deal with poorly written code is the bad practice.
• jfriend00: @jbabey - by that yardstick, Jordan's answer is probably wrong too. The real problem with this code is that there's either a bad value in the temp array or there's a missing value in the HTML.

Answer 3

I think your loop is accessing one more item than really exists e.g. when busLines ends with ', '