如何通过获取用户输入来对Javascript中的数字进行排序并找到元素的位置？

Question

I have a form which takes in numbers from the user. 我有一个从用户那里输入数字的表格。 I want to sort these numbers and show the output. 我想对这些数字进行排序并显示输出。 Also after sorting I want the user to enter a number present in the array and show the position of the element in the sorted array. 同样在排序后，我希望用户输入数组中存在的数字并显示元素在排序数组中的位置。

But I am getting stuck at the sorting stage itself. 但是我自己陷入了分拣阶段。

Here is the code that I am trying: 这是我正在尝试的代码：

<html>
<body>
<form name="f">
    <pre>
        Enter number 1: <input type="text" name="first" id="first">
        Enter number 2: <input type="text" name="second" id="second">
        Enter number 3: <input type="text" name="third" id="third">
        Enter number 4: <input type="text" name="fourth" id="fourth">
        Enter number 5: <input type="text" name="fifth" id="fifth">
        Enter number 6: <input type="text" name="sixth" id="sixth">
        Enter number 7: <input type="text" name="seventh" id="seventh">
        Enter number 8: <input type="text" name="eighth" id="eighth">
        Enter number 9: <input type="text" name="ninth" id="ninth">
        Enter number 10: <input type="text" name="tenth" id="tenth">
    </pre>
    <br>
    <button onclick="sortfunction()">Click to sort</button>
    <br><br>
    Sorted numbers: <input type="text" name="sorted">
</form>

<script>
    function sortfunction()
    {
        var num=new Array();
        num[0]=document.getElementById("first");
        num[1]=document.getElementById("second");
        num[2]=document.getElementById("third");
        num[3]=document.getElementById("fourth");
        num[4]=document.getElementById("fifth");
        num[5]=document.getElementById("sixth");
        num[6]=document.getElementById("seventh");
        num[7]=document.getElementById("eighth");
        num[8]=document.getElementById("ninth");
        num[9]=document.getElementById("tenth");
        num.sort();
        document.f.sorted.value=num;
    }
</script>

When I am clicking on click to sort, the output box shows [object HTML InputElement],[object HTML InputElement],... 当我单击单击以进行排序时，输出框将显示[object HTML InputElement],[object HTML InputElement],...

Where am I going wrong? 我要去哪里错了？ Any kind of help would be appreciated. 任何帮助将不胜感激。 Thanks. 谢谢。

Answer 1

document.getElementById("first");

returns the element input here and that is a object HTML InputElement type. 返回此处input的元素，它是object HTML InputElement类型。 One more thing I would like to add, instead of manually collecting all the input of text type by id you can collect it in a loop that will save your time and also you don't have to worry about number of inputs. 我想添加一件事，而不是通过id手动收集所有文本类型的输入，您可以将其收集在一个循环中，这将节省您的时间，而且您不必担心输入的数量。 Ex: 例如：

 <script>
        var num = new Array();
        var textInputs = document.getElementsByTagName('input');
        for(var i=0; i<textInputs.length; i++)
        {
            if(textInputs[i].getAttribute('type')=='text')
            {
                num.push(textInputs[i].value);
            }
        }
 </script>

Answer 2

To get a value of input html element use selector.value example document.getElementById("first").value . 要获取输入html元素的值，请使用selector.value示例document.getElementById("first").value 。

Also sort function need to get some compare function as by default it will convert number into string and then sort. 排序功能还需要获取一些比较功能，因为默认情况下它将将数字转换为字符串然后进行排序。 See MDN for more Compare function 有关更多比较功能，请参见MDN

(a,b)=>Number(a)>=Number(b)?1:-1

Here is the code which solve your problem 这是解决您问题的代码

    <form name="f">
    <pre>
        Enter number 1: <input type="text" name="first" id="first">
        Enter number 2: <input type="text" name="second" id="second">
        Enter number 3: <input type="text" name="third" id="third">
        Enter number 4: <input type="text" name="fourth" id="fourth">
        Enter number 5: <input type="text" name="fifth" id="fifth">
        Enter number 6: <input type="text" name="sixth" id="sixth">
        Enter number 7: <input type="text" name="seventh" id="seventh">
        Enter number 8: <input type="text" name="eighth" id="eighth">
        Enter number 9: <input type="text" name="ninth" id="ninth">
        Enter number 10: <input type="text" name="tenth" id="tenth">
    </pre>
    <br>
    <button onclick="sortfunction()">Click to sort</button>
    <br><br>
    Sorted numbers: <input type="text" name="sorted">
</form>
<script>


    function sortfunction(){
    event.preventDefault();
    var num=new Array();
    num[0]=document.getElementById("first").value;
    num[1]=document.getElementById("second").value;
    num[2]=document.getElementById("third").value;
    num[3]=document.getElementById("fourth").value;
    num[4]=document.getElementById("fifth").value;
    num[5]=document.getElementById("sixth").value;
    num[6]=document.getElementById("seventh").value;
    num[7]=document.getElementById("eighth").value;
    num[8]=document.getElementById("ninth").value;
    num[9]=document.getElementById("tenth").value;
    num.sort((a,b)=>Number(a)>=Number(b)?1:-1)
    document.f.sorted.value=num;
        }
    </script>

See working example at codepen 在Codepen上查看工作示例

如何通过获取用户输入来对Javascript中的数字进行排序并找到元素的位置？

问题描述

2 个解决方案

解决方案1
0 2017-11-19 03:56:56

解决方案2
0 已采纳 2017-11-19 05:10:23

如何通过获取用户输入来对Javascript中的数字进行排序并找到元素的位置？

问题描述

2 个解决方案

解决方案1 0 2017-11-19 03:56:56

解决方案2 0 已采纳 2017-11-19 05:10:23

解决方案1
0 2017-11-19 03:56:56

解决方案2
0 已采纳 2017-11-19 05:10:23