Question

这是我的代码。我随机在文本框中输入数字。

<html>
<body>

<p>
    txt1: <input type = "text" id = "number1" value = ""><br>
    txt2: <input type = "text" id = "number2" value = ""><br>
    txt3: <input type = "text" id = "number3" value = ""><br>
    txt4: <input type = "text" id = "number4" value = ""><br>
    txt5: <input type = "text" id = "number5" value = ""><br>
</p>

<script>
    function randomNumbers() {
        var a = Math.floor((Math.random() * 10) + 1);
        var b = Math.floor((Math.random() * 10) + 1);
        var c = Math.floor((Math.random() * 10) + 1);
        var d = Math.floor((Math.random() * 10) + 1);
        var e = Math.floor((Math.random() * 10) + 1);
        document.getElementById("number1").value = a;
        document.getElementById("number2").value = b;
        document.getElementById("number3").value = c;
        document.getElementById("number4").value = d;
        document.getElementById("number5").value = e;
    }

</script>

<button 
    onclick = "randomNumbers()">rand_button
</button>

<script>
    function sort(a,b){
        return(a-b)
    }
    function sortNumbers(){
        var v = document.getElementById("number1").value;
        var w = document.getElementById("number2").value;
        var x = document.getElementById("number3").value;
        var y = document.getElementById("number4").value;
        var z = document.getElementById("number5").value;
        var numbersArray = new array["v", "w", "x", "y", "z"];
        numbersArray.sort(sort);
        document.getElementById("number1").value = sorted_string_of_values;
        document.getElementById("number2").value = sorted_string_of_values;
        document.getElementById("number3").value = sorted_string_of_values;
        document.getElementById("number4").value = sorted_string_of_values;
        document.getElementById("number5").value = sorted_string_of_values;
    }
</script>

<button
    onclick = "sortNumbers()">sort_button
</button>

</body>
</html>

好像我没能从文本框中收集数字。那么在排序之前如何将输入放入am数组呢？

Answer 1

在sortNumbers()

中

 var numbersArray = new Array(v, w, x, y, z); // NOTICE! No box brackets and Array with Capital A
 numbersArray.sort(sort);
 document.getElementById("number1").value = numbersArray[0];
 document.getElementById("number2").value = numbersArray[1];
 document.getElementById("number3").value = numbersArray[2];
 document.getElementById("number4").value = numbersArray[3];
 document.getElementById("number5").value = numbersArray[4];

编辑：

在原始代码中，出现语法错误。执行var numbersArray = new array[];时会出现两个错误。

首先，在您的代码中，没有array这样的东西。我假设您要做的是new Array（带有大写A的数组）

如果您要使用new Array语法，那么使用new Array[]是错误的。它会说Uncaught TypeError: Array不是一种功能。

所以你需要做的是，

var numbersArray = new array(v, w, x, y, z);因为你想使用v，w，x，y和z的值，所以不应该引用它们。

Check this Fiddle

Answer 2

您可以简化代码。

您可以使用选择器querySelectorAll进行查询，而不是通过id单独选择输入。这将返回元素集合（nodeList），然后您可以在其上调用数组方法。

以下是一个示例，代码注释中有解释：

// select all inputs inside the p with id container
var inputs = document.querySelectorAll('#container > input');

// listen for click event on button with id btn
document.getElementById('btn1').addEventListener("click", randomNumbers);
document.getElementById('btn2').addEventListener("click", sortNumbers);


function randomNumbers() {
    var arr = [], len = inputs.length;
    // create an array with random numbers
    for (var i=0; i < len; i++) {
        arr.push(Math.floor(Math.random() * len))
    } 
    // iterate the colletion assign the new array values
    [].forEach.call(inputs, function(elem, i) {
        elem.value = arr[i];
    })  
}

function sortNumbers() {
    
    // iterate the collection and get values into a new array and sort it
    var arr = [].map.call(inputs, function(elem) {
        return elem.value;
    }).sort();
  
    // iterate the colletion again and assign the new array values back
    [].forEach.call(inputs, function(elem, i) {
        elem.value = arr[i];
    })
}

<p id="container">
    txt1: <input type="text" id="number1" value="4"><br>
    txt2: <input type="text" id="number2" value="8"><br>
    txt3: <input type="text" id="number3" value="1"><br>
    txt4: <input type="text" id="number4" value="3"><br>
    txt5: <input type="text" id="number5" value="2"><br>
</p>
<button id="btn1">Randomize</button>
<button id="btn2">Sort</button>

Answer 3

尝试使用此功能创建＆amp;排序数组：

var numbersArray = [v, w, x, y, z];
numbersArray.sort(function(a, b){return a-b});

编辑：然后为每个文本框分配索引项，如：numbersArray [0]

从texbox收集数字，对它们进行排序，然后用数字表示它们？

3 个答案: