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

1
  • getElementById retorna o elemento, não o seu valor. Vc precisa pegar o value e converter para número: var num1 = parseInt(document.getElementById('cal1').value) (ou parseFloat se o número tiver casas decimais)
    – hkotsubo
    5/07/2021 às 18:37

2 Respostas 2

0

Se atente que você está pegando o elemento como um todo, e não o valor dele.

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

No final ficará desta forma:

<!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>

Dicas

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .