Javascript Array值出现两次

-1

嗨，我希望有人能帮助我。我有5个输入框，我从这些框中获取值并将它们放入JavaScript中的数组中，然后按字母顺序对这些值进行排序，这非常完美。问题是，由于某些原因，当这些值被放入数组中时，它将它们加倍，并且它给出两次值。任何帮助，将不胜感激。谢谢。Javascript Array值出现两次

<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>

来源

2016-09-06 user3260744

请以一致的方式格式化您的代码。当代码格式不正确时，更难理解，调试和检查语法错误。如果格式正确，人们也会对你的问题做出更积极的回应。像[JSBeautifier]（http://jsbeautifier.org/）这样的工具可以帮助您正确地设置代码的格式。 –

预期的行为是用户将在输入字段中输入5个选项，然后一旦单击该按钮，这些值将被放置到数组中并按字母顺序排序，然后新的排序值将出现在输入字段中。例如，如果我输入Apple，Bananna，Orange，Pear，Zebra。排序后的值将是Apple，Apple，Bananna，Bananna，Orange，Orange，Pear，Pear，Zebra，Zebra。 – user3260744

我不问任何人为我写代码。我只是问有人可以解释为什么价值翻倍。谢谢你的粗鲁 – user3260744

这是因为getElementsByClassName返回一个类似数组的对象，而不是实际的阵列。如果你使用console.dir(answer)，你会发现，除了你可以在数组中找到的数字键之外，对象每个命名元素都有一个键。 for in loops遍历对象上的每个属性，所以你得到了两次你的值。

来源

2016-09-06 21:29:41 bmceldowney

这是对发生了什么更好的解释。 – Quantastical

感谢您的帮助。很高兴知道这个关于for循环，这个信息肯定会对未来有所帮助。我很感激。 – user3260744

问题是与这个循环：

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包含两次元素，一次包含索引，一次包含name属性。这就是为什么你的循环会在集合中找到两个元素。

如果你把它变成一个传统的for循环它将工作：

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

来源

2016-09-06 21:21:22 Quantastical

稍微详细一点，节点重复，首先与索引0,1,2,3,4，然后再与cha，chb，chc，chd，che。通过切换到如上所述的整数索引，您只会打到前5个。 – nurdyguy

谢谢，实际上使事情变得更清晰。改回传统的for-loop已经解决了这个问题。感谢您的优秀解释！ – user3260744

Javascript Array值出现两次

回答

相关问题