Sort three numbers in ascending order

Question

This is the code, when i Run it, it only displays "[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement]". How do I make it display the numbers that I've inputted in ascending order ?

function sortnums() {
  var trap = [num1, num2, num3];
  trap = trap.sort();
  document.getElementById('type2').innerHTML = (trap)
}

<div align="center">
  <h1 id="type1">Sort Numbers</h1>
  <h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="simint" action="/action_page.php" style="font-size: 36px">
  <input id="num1" type="number" name="number1" style="font-size: 36px" placeholder="number1"> <br><br>
  <input id="num2" type="number" name="number2" style="font-size: 36px" placeholder="number2"> <br><br>
  <input id="num3" type="number" name="number3" style="font-size: 36px" placeholder="number3"> <br><br>
  <input type="button" onclick="sortnums()" value="Sort" style="font-size: 36px">
  <h2 id="type2"></h2>
</form>

You are sorting DOM elements. Use their values instead: `var trap = [num1.value, num2.value...` and learn [how to sort numbers correctly](https://stackoverflow.com/questions/1063007/how-to-sort-an-array-of-integers-correctly) — blex, Jul 05 '20 at 14:45
Alse to be safe, do not rely on the IDs being stored in the windows scope, but access them as `document.getElementById("num1").value` — mplungjan, Jul 05 '20 at 14:52

ThS · Answer 1 · 2020-07-05T14:55:38.877

0

You need to sort the values of the inputs not the input elements themselves :

function sortnums() {
  // using the "value" attribute of the inputs
  // "+" casts the values to integers
  var trap = [+num1.value, +num2.value, +num3.value].sort();
  document.getElementById('type2').innerHTML = trap
}

<div align="center">
  <h1 id="type1">Sort Numbers</h1>
  <h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="simint" action="/action_page.php" style="font-size: 36px">
  <input id="num1" type="number" name="number1" style="font-size: 36px" placeholder="number1"> <br><br>
  <input id="num2" type="number" name="number2" style="font-size: 36px" placeholder="number2"> <br><br>
  <input id="num3" type="number" name="number3" style="font-size: 36px" placeholder="number3"> <br><br>
  <input type="button" onclick="sortnums()" value="Sort" style="font-size: 36px">
  <h2 id="type2"></h2>
</form>

edited Jul 05 '20 at 14:55

answered Jul 05 '20 at 14:49

ThS

4,597
2
15
27

I do not recommend to access the fields by their window shadow elements – mplungjan Jul 05 '20 at 14:51
me either ! but if I refactor the code and use DOM methods to select the elements I'll probably make the code confusing for the OP as he's not using them (DOM methods). – ThS Jul 05 '20 at 14:53
This seems to sort the numbers as characters in each number, not as the whole numbers themselves. – Dhruv M Jul 05 '20 at 14:53
you may add `+` in front of each input's value attribute. I'll update the post for that. – ThS Jul 05 '20 at 14:54

score 0 · Answer 2 · answered Jul 05 '20 at 15:41

you can use multiple input field using this method

   const sortnums = () => {
      const numbers = [];
      document.querySelectorAll('input[type="number"]').forEach(input => numbers.push(input.value));
      document.getElementById("type2").innerHTML = numbers.sort();
    };

Sort three numbers in ascending order

2 Answers2