JavaScript array.length返回正确的数字，但console.log（array）为空

Question

I'm getting form data for HTML check boxes here:

host1 = document.getElementById("host1").checked;
host2 = document.getElementById("host2").checked;
host3 = document.getElementById("host3").checked;
host4 = document.getElementById("host4").checked;
host1Value = document.getElementById("host1").value;
host2Value = document.getElementById("host2").value;
host3Value = document.getElementById("host3").value;
host4Value = document.getElementById("host4").value;

Appending to an empty array those which are checked and setting a variable to the array length:

if (host1) {hostsArray.push(host1Value); };
if (host2) {hostsArray.push(host2Value); };
if (host3) {hostsArray.push(host3Value); };
if (host4) {hostsArray.push(host4Value); };
hostsNum = hostsArray.length;

When I log hostNum and hostsArray to the console, hostNum correctly identifies the number of checked boxes so the array is reporting the correct length, but the array logs as empty. I'm at a loss.

Answer 1

This code work fine in Chrome, you can also see it on this JSbin : http://jsbin.com/eSuwAri/2

I have refactor it with a simple for loop, but it's almost the same as your example. I presume the problem is elsewhere in your js or html code.

HTML :

<input id="host1" type="checkbox" name="host1name" value="host1value">host1 text<br>
<input id="host2" type="checkbox" name="host2name" value="host2value">host2 text<br>
<input id="host3" type="checkbox" name="host3name" value="host3value">host3 text<br> 
<input id="host4" type="checkbox" name="host4name" value="host4value">host4 text<br>               
<button onclick="test()">Click me</button>

Javascript :

    function test(){
        var hostsArray = new Array();
        for (var i=1;i<=4;i++){ 
            var id = "host" + i;
            var checked = document.getElementById(id).checked;
            var value = document.getElementById(id).value;

            if (checked) {
                hostsArray.push(value) 
            };
        }
        hostsNum = hostsArray.length;

        console.log("Array : ")
        console.log(hostsArray);
        console.log("number of value : " +  hostsNum);
    }

Console output:

"Array : "
["host1value", "host2value", "host3value", "host4value"]
"number of value : 4"