On the Javascript part, how do I convert a number? Nan’s It

Asked

Viewed 65 times

-2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cálculo da média</title>
</head>

<body>
  <h1>Cálculo da média</h1>
  <input type="number" name="cal1" id="cal1">
  <input type="number" name="cal2" id="cal2">
  <input type="button" value="Calcular" onclick="calcular()">
  <div id="res">
    Testando
  </div>
  <script>
    function calcular() {
      //Nessa parte estou confuso, pois não sei o o que faço para converter
      //Quando coloco os números no input number, ele da NaN
      var num1 = window.document.getElementById('cal1')
      var num2 = window.document.getElementById('cal2')
      var calculo = (num1 + num2) / 2
      var conversor = calculo
      res.innerHTML = Number(conversor)



    }
  </script>

</body>

</html>

javascript html nan

  • getElementById returns the element, not its value. You need to take the value and convert to number: var num1 = parseInt(document.getElementById('cal1').value) (or parseFloat if the number has decimal places)

2 answers

0

Note that you are taking the element as a whole, not its value.

var num1;
// Neste exemplo, o num1 é o elemento <input type="number" name="cal1" id="cal1">
num1 = window.document.getElementById('cal1'); // Isso aqui é um Input HTML, não o valor do Input

// Aqui nós estamos pegando um atributo do input, no caso o value
num1 = window.document.getElementById('cal1').value; // Isso aqui é o valor, mas ele pode estar no formato de um String
// Lembre-se que 1 !== '1'
// '1' + 1 = '11'

// Converta para Número antes de fazer qualquer operação para que não aconteça concatenações ou não gere um NaN
num1 = Number(num1); // Uma forma de converter

In the end it will stay this way:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cálculo da média</title>
</head>

<body>
  <h1>Cálculo da média</h1>
  <input type="number" name="cal1" id="cal1">
  <input type="number" name="cal2" id="cal2">
  <input type="button" value="Calcular" onclick="calcular()">
  <div id="res">
    Testando
  </div>
  <script>
    function calcular() {
      
      var num1 = Number(window.document.getElementById('cal1').value);
      var num2 = Number(window.document.getElementById('cal2').value);
      var calculo = (num1 + num2) / 2;
      var conversor = calculo;
      res.innerHTML = Number(conversor);



    }
  </script>

</body>

</html>

Tips

  • Always use ; in Javascript (Learn more in /a/3348/83882)
  • You can use the Number or the parseInt to convert to number (See the difference between them here /a/180252/83882)
  • NaN is an English acronym for Not a Number (Learn more in /a/92174/83882)

-2

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cálculo da média</title>


</head>
<body>
    <h1> Cálculo da média</h1>
    <input type="number" name="txtn1" id="txtn1">
    <input type="number" name="txtn2" id="txtn2">
    <input type="button" value="somar" onclick="somar()">
    <div id = "res"> Testando </div>
    <script>
    function somar () { 
    // tenta mudar os nomes da variáveis e dos ID
       var tn1 = window.document.getElementById('txtn1')
       var tn2 = window.document.getElementById('txtn2')
       var res = window.document.getElementById('res')
       var n1 = Number(tn1.value)
       var n2 = Number(tn2.value)
       var s = n1 + n2 
       res.innerHTML = `A soma de ${n1} e ${n2} é igual  a <strong>${s} 
       </strong>`
    }
    </script>
    
</body>
</html>

Browser other questions tagged javascript html nan

You are not signed in. Login or sign up in order to post.