Input returns string,

Question

I did this logic exercise where I read three numbers and print them and ascending order. The logic is OK but the inputs return a String I tried to give parseint but did not solve, I would like a hint.

Code: https://jsfiddle.net/x7pz1j64/? fbclid=Iwar2jnbinpy2k-sanPaQVooVrVuKfXeIHCcj8Mdwis8g87mcM1nRxRJOTSIk

Answer 1

I didn’t evaluate your code, but with parseInt worked the way it apparently should.

const num_1 = document.querySelector("#num_1");
const num_2 = document.querySelector("#num_2");
const num_3 = document.querySelector("#num_3");
const submit = document.querySelector("#submit");

const li_1 = document.querySelector(".numero_1");
const li_2 = document.querySelector(".numero_2");
const li_3 = document.querySelector(".numero_3");

let maior = 0;
let meio = 0;
let menor = 0;
let a = 0;
let b = 0;
let c = 0;

submit.addEventListener("click", function(event) {
  event.preventDefault();
  a = parseInt(num_1.value, 10);
  b = parseInt(num_2.value, 10);
  c = parseInt(num_3.value, 10);

  if (a > b && a > c) {
    alert("Aconteceu A")
    maior = a;

    if (c > b) {
      console.log("C > B " + maior);
      meio = c;
      menor = b;
    } else {
      console.log("B > C " + maior);
      meio = b;
      menor = c;
    }
  }

  if (b > a && b > c) {
    alert("Aconteceu B")
    maior = b;

    if (a > c) {
      console.log("A > C " + maior);
      meio = a;
      menor = c;
    } else {
      console.log("C > A " + maior);
      meio = c;
      menor = a;
    }
  }

  if (c > a && c > b) {
    alert("Aconteceu C");
    maior = c;
    if (b > a) {
      console.log("B > A " + maior);
      meio = b;
      menor = a;
    } else {
      console.log("A > B " + maior);
      meio = a;
      menor = b;
    }
  }

  li_1.textContent = maior;
  li_2.textContent = meio;
  li_3.textContent = menor;

  console.log(a + " debug");
});

ul {
  list-style-type: none;
}

<form>
  <input type="number" name="num_1" id="num_1">Numero 1<br>
  <input type="number" name="num_2" id="num_2">Numero 2<br>
  <input type="number" name="num_3" id="num_3">Numero 3<br>
  <button id="submit">Send</button>
</form>
<ul class="lista_numeros">
  <li class="numero_1">Maior</li><br>
  <li class="numero_2">Meio</li><br>
  <li class="numero_3">Menor</li>
</ul>

<script type="text/javascript" src="javascript.js"></script>

A suggested improvement of your code is to use the function sort of array to sort the numbers:

const num_1 = document.querySelector("#num_1");
const num_2 = document.querySelector("#num_2");
const num_3 = document.querySelector("#num_3");
const submit = document.querySelector("#submit");

const li_1 = document.querySelector(".numero_1");
const li_2 = document.querySelector(".numero_2");
const li_3 = document.querySelector(".numero_3");

submit.addEventListener("click", function(event) {
  event.preventDefault();
  const numeros = [
    parseInt(num_1.value, 10),
    parseInt(num_2.value, 10),
    parseInt(num_3.value, 10),
  ];

  numeros.sort((a, b) => a - b);

  li_1.textContent = numeros[0];
  li_2.textContent = numeros[1];
  li_3.textContent = numeros[2];
});

ul {
  list-style-type: none;
}

<form>
  <input type="number" name="num_1" id="num_1">Numero 1<br>
  <input type="number" name="num_2" id="num_2">Numero 2<br>
  <input type="number" name="num_3" id="num_3">Numero 3<br>
  <button id="submit">Send</button>
</form>
<ul class="lista_numeros">
  <li class="numero_1">Maior</li><br>
  <li class="numero_2">Meio</li><br>
  <li class="numero_3">Menor</li>
</ul>

sort

The Sort() method sorts the elements of the array itself and returns the array. Sorting is not necessarily stable. The default ordering is according to the Unicode code score.