Question

The routine below works perfectly in Mozilla, but not in IE (I’m using 9 but have changed the compatibility mode and it’s broken in 7 and 8 too).

I know that it’s something to do with the e.type as ‘undefined’ in IE, and fine in Moz, but don’t know what the correct syntax should be to satisfy both.

function changeChartColumns(){
        var myArray = [];
        var k = 1;
        var b = 0;
        myArray[0]=0;
        for (b in document.frm_obj.elements) {
            var e = document.frm_obj.elements[b];
            if ( e.type=="checkbox" ) {
                if(e.checked == true){
                    var at_least_one_checked = true;
                    myArray[k] = parseInt(e.value,10);
                    k = k+1;
                }
            }
        }
        if(at_least_one_checked == true){
            return myArray;
        }else{
            alert("I cannot display zero information. Please select some stuff using the checkboxes.");
            stop_script_running; // horrible hack
        }
}

Here’s the HTML:

<form name="frm_obj" id="frm_obj" method="post">
      <table>   
        <tr>
         <td><input type="checkbox" name="list" value="2" checked onClick="changeChartColumns();"></td>
         <td>Option 1</td>
         <td><input type="checkbox" name="list" value="3" checked onClick="changeChartColumns();"></td>
         <td>Option 2</td>
         <td><input type="checkbox" name="list" value="4" checked onClick="changeChartColumns();"></td>

       </table>
     </form>

Thanks in advance. H.

Answer 1

Use a proper for loop:

    for (var i=0; i < document.frm_obj.elements.length; i++) {

Working demo: http://jsfiddle.net/y7xFz/1

for...in is designed to iterate over all enumerable properties of an object. document.frm_obj.elements returns a HTMLCollection, whose enumerable properties differ between browsers. In general, you shouldn’t use for...in on arrays and HTMLCollections – reserve use for object maps with named properties only.