Question

这是index.php

此Javascript用于随机数字并显示在9个文本框中。

  <script>
        function GetRandom()
        {
            var myElement = document.getElementById("no1")
            myElement.value = Math.floor((Math.random() * 1000) + 1);
            var myElement = document.getElementById("no2")
            myElement.value = Math.floor((Math.random() * 100) + 1);
            var myElement = document.getElementById("no3")
            myElement.value = Math.floor((Math.random() * 10000) + 1);
            var myElement = document.getElementById("no4")
            myElement.value = Math.floor((Math.random() * 1000) + 1);
            var myElement = document.getElementById("no5")
            myElement.value = Math.floor((Math.random() * 10000) + 1);
            var myElement = document.getElementById("no6")
            myElement.value = Math.floor((Math.random() * 1000) + 1);
            var myElement = document.getElementById("no7")
            myElement.value = Math.floor((Math.random() * 1000) + 1);
            var myElement = document.getElementById("no8")
            myElement.value = Math.floor((Math.random() * 1000) + 1);
            var myElement = document.getElementById("no9")
            myElement.value = Math.floor((Math.random() * 10000) + 1);
        }
    </script>

此javascript将9个文本框值放入数组和排序列表

    <script>
        function sortlist()
        {
            var captureNumb = document.getElementById("no1");
            var captureNumb = document.getElementById("no2");
            var captureNumb = document.getElementById("no3");
            var captureNumb = document.getElementById("no4");
            var captureNumb = document.getElementById("no5");
            var captureNumb = document.getElementById("no6");
            var captureNumb = document.getElementById("no7");
            var captureNumb = document.getElementById("no8");
            var captureNumb = document.getElementById("no9");
            var captureNumb = document.getElementById("no1");

            var numbers = captureNumb.value.split(" ");
            captureNumb.value = numbers.sort(function (a, b) {
                return a - b
            }).join(" ");
        }
    </script>

</head>
<body>
    <div class="form-inline">
        <div class="col-xs-12">
            <div class="form-group">

                <input type="text" class="form-control" id="no1" name="no1" placeholder="No 1">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no2" name="no2" placeholder="No 2">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no3" name="no3" placeholder="No 3">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no4" name="no4" placeholder="No 4">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no5" name="no5" placeholder="No 5">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no6" name="no6" placeholder="No 6">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no7" name="no7" placeholder="No 7">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no8" name="no8" placeholder="No 8">
            </div>
            <div class="form-group">
                <label for="exampleInputName2"></label>
                <input type="text" class="form-control" id="no9" name="no9" placeholder="No 9">
            </div>
            <br><br><br> 
            <div align="center">



                <button type="button" class="btn btn-primary" onclick="GetRandom()">Populate</button>

                <button type="button" class="btn btn-primary" onclick="sortlist()" >Sort list</button>
                <button type="button" class="btn btn-primary">Primary</button>
            </div>
        </div>
    </div>

如何点击按钮排序列表并重新显示排序列表？
试图从9个文本框中捕获值。

Answer 1

您的代码需要认真研究。你有很多可以通过循环解决的重复语句，并且在重新定义变量的每一行上，例如var myElement = ...连续两行，将变量分配给变量确实没有意义，你永远不会引用myElement，它的值会在下一行被覆盖。

就您要求排序的内容而言，您需要从某些数据结构中动态插入它们。

<?php
    $values = someGeneratingFunction();
    $values = someSortFunction($values);
    for($i=0;$i<count($values);$i++) {
        echo "<input type=\"text\" class=\"form-control\" id=\"no" . $i . "\" name=\"no" . $i . "\" placeholder=\"No 1\">"
    }
    // Note the insertion of the ID values ("no1", "no2" etc.) using the loop instead of repeatedly typing the same thing.
?>

请注意，上面的代码并未使用您提供的整个HTML结构，但您可以将其用作如何实现所需内容的一般概念。当你调用一个sort方法时，你可以重新运行这个代码，它只会按照它们放入的顺序打印数组values中的所有元素。

修改

考虑以下JavaScript。

function sortList() { var values = []; for(i=1;i<10;i++) { values.push(document.getElementById("no".concat(i))); } return values.sort( function(a,b) { return a-b } ); }

我们初始化一个数组以保存由ID "no1"，"no2"等标识的所有元素。然后我们将它们逐个推送，在一个访问它们的for循环中全部使用索引（注意这是我得到的，因为这比连续重复相同的代码10行，只改变一个数字。），然后我们返回我们的排序数组。请注意，我们将函数作为参数传递给我们调用values.sort( function(a,b) { return a-b } )时。这是因为默认情况下，.sort()方法按字母顺序排序，按升序排列。因此数组[1, 3, 200, 15000]将被排序为[1, 15000, 200, 3]，这显然不是按数字顺序排列的。通过提供附加功能作为参数，我们告诉它减去两个（它作为我们的比较器）然后将为我们提供准确的数值结果。

如何对数组中的列表进行排序并按排序显示到文本框中

1 个答案: