2015-09-09 3 views
0

Вот мой код. Я беспорядочно вводит числа в текстовые поля.Соберите номера из texboxes, отсортируйте их и верните их численно?

<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, прежде чем сортировать его?

+1

Попробуйте удалить двойные кавычки из массива, var numbersArray = новый массив ["v", "w", "x", "y", "z"] ;. Это должно быть: var numbersArray = новый массив [v, w, x, y, z]; –

+0

@MuhammadIdrees попытался ... но все еще не могу сортировать –

+1

Отладить массив, если массив содержит все ваши значения. то мы переходим к следующей вещи: SORT –

ответ

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

EDIT:

В исходном коде, была ошибка синтаксиса. Когда вы делаете var numbersArray = new array[];, есть две ошибки.

Во-первых, в вашем коде нет такой вещи, как array. Я предполагаю, что вы хотите сделать, это new Array (Array с капиталом A)

И если вы собираетесь использовать new Array синтаксис, а затем с помощью new Array[] неправильно. Он скажет, что Uncaught TypeError: Array не является funtion.

Так что вам нужно сделать, это,

var numbersArray = new array(v, w, x, y, z); и так как вы хотите использовать значения V, W, X, Y и Z, не должно быть никаких цитат с ними.

Check this Fiddle

+0

все еще не может ... когда я нажал кнопку сортировки, ничего не случится –

+0

есть ошибки? Я прикрепил скрипку. Проверьте обновленный ответ. – AdityaParab

+0

Это работает! Большое спасибо, я вижу свою ошибку сейчас –

1

Вы можете упростить код.

Вместо выбора входов по отдельности через id, вы можете запросить с помощью селектора querySelectorAll. Это вернет коллекцию элементов (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>

+0

Вау, это намного лучше ... спасибо большое –

0

Попробуйте создать & сортировки массива:

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

Edit: затем присвоить индексированный элемент для каждого текстового поля, например: numbersArray [0]