的JavaScript array.length返回正確的號碼，但執行console.log（陣列）空

Question

我得到的HTML複選框這裏表單數據：這是檢查

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; 

追加到一個空數組那些和設置變量數組長度：

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

當我登錄hostNum和hostsArray到控制檯，hostNum正確標識的檢查框，以便該陣列被報告的正確長度的數目，但該陣列日誌爲空。我很茫然。

Answer 1

在Chrome代碼做工精細，你也可以看到它在這個JSbin：http://jsbin.com/eSuwAri/2

我有一個簡單的for循環重構它，但它是幾乎一樣的例子。我認爲這個問題是在你的js或html代碼中的其他地方。

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); 
    } 

控制檯輸出：

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