Question

您好我希望有人可以帮助我。我有5个输入框，我从这些框中获取值并将它们放入JavaScript中的数组中，然后按字母顺序对这些值进行排序，这非常有效。问题在于，由于某种原因，当值被放入数组时，它会使它们加倍并且它会给出值两次。任何帮助，将不胜感激。感谢。

<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

问题在于这个循环：

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++) {
    ...
}

Answer 2

这是因为getElementsByClassName返回一个类似数组的对象，而不是一个实际的数组。如果您console.dir(answer)，您会看到，除了您在数组中找到的数字键之外，该对象每个命名元素都有一个键。 for in loops遍历对象上的每个属性，因此您将获得两次值。

Javascript数组值出现两次

2 个答案: