Javascript配列の値が2回表示される

Question

こんにちは、私は誰かが私を助けることを望んでいます。私は5つの入力ボックスを持っており、これらのボックスから値を取得し、JavaScriptで配列に配置し、アルファベット順に並べ替えて、これは完全に機能します。問題は、何らかの理由で値が配列に格納されるときに値が倍になり、値が2度与えられるということです。どんな助けもありがとう。ありがとう。ここで

<form> 
    *Choice A 
    <input type="text" maxlength="100" name="cha" class="answer" rows="1" cols="10"> 

    *Choice B 
    <input type="text" maxlength="100" name="chb" class="answer" rows="1" cols="10"> 

    *Choice C 
    <input type="text" maxlength="100" name="chc" class="answer" rows="1" cols="10" > 

    *Choice D 
    <input type="text" maxlength="100" name="chd" class="answer" rows="1" cols="10" > 

    *Choice E 
    <input type="text" maxlength="100" name="che" class="answer" rows="1" cols="10" > 

    <input type = "button" id="myBtn" onclick="myFunction()" value ="Selection Sort in Ascending Order"> 
    <br/> 
    <div id="showInputValues"> 
    </div> 
</form> 

はJavascriptを次のとおりです。

<script language="javascript"> 
    var getBtn = document.getElementById('myBtn'); 
    getBtn.onclick = function() { 
     getTheData() ; 
    } 

    function getTheData() { 
     var answer = document.getElementsByClassName("answer"); 
     var inputValues = new Array(); 

     for (var i in answer) { 
      //extract the value of input elements 
      var singleVal = answer[i].value; 
      if (singleVal !== "" && singleVal !== undefined) { 
       inputValues.push(singleVal); 
      } 
     } 
     console.log(inputValues); 
     inputValues.sort(); 
     //Display sorted values on form 
     console.log(inputValues); 
     alert(inputValues); 
     // set the sorted values : 
     for (var i=0;i<inputValues.length;i++) { 
      //extract the value of input elements 
      console.log(i); 
      console.log(inputValues[i]); 
      answer[i].value = inputValues[i]; 
     } 
    } 
</script> 

Answer 1

getElementsByClassNameは、配列のようなオブジェクトではなく、実際の配列を返すためです。 console.dir(answer)の場合、配列内にあるテンキーに加えて、オブジェクトには名前付き要素ごとに1つのキーがあることがわかります。 for in loopsオブジェクトのすべてのプロパティをループするので、値が2回表示されます。

Answer 2

問題は、このループである：私はこの説明にビットをオフにすることができ

for (var i in answer) { 
    //extract the value of input elements 
    var singleVal = answer[i].value; 
    if (singleVal !== "" && singleVal !== undefined) { 
     inputValues.push(singleVal); 
    } 
} 

が、answer変数がから来ていますdocument.getElementsByClassName(...)はNodeListを返します。 NodeListには、要素をインデックスで2回、name属性で1回、要素が2回含まれています。そのため、ループでコレクション内の各要素の2つが検出されます。あなたはforループの伝統に変更した場合、それが動作します

：

for (var i = 0; i < answer.length; i++) { 
    ... 
}