Skip to main content
2 de 2
adicionou 921 caracteres ao conteúdo
Leo Letto
  • 3,4mil
  • 3
  • 21
  • 47

O que você está fazendo na verdade é somar dois elementos HTML, mas não os seus valores

var n1 = document.getElementById('l') neste caso n1 não é o valor do seu input, mas é um objeto com um referimento ao seu input, você pode abrir o console do browser que você estiver ultilizando geralmente apertando F12, para que você pode obter informações mais detalhadas sobre as variáveis que você declara, por exemplo: console.log(n1) não irá imprimir o valor do seu input, mas o objecto que faz referimento ao seu input, através deste você pode obter o valor que está dentro do input simplemente chamando n1.value, então no seu caso seria:

<script>
    var n1 = document.getElementById('l');
    var n2 = document.getElementById('e');
    var n3 = n1.value + n2.value

        function calcula() {
            document.write(`o resutado e:`+ n3)
        }
</script>

Mas ainda tem um erro, quando você clica no botão a função calcula é chamada e dentro dela você está imprimindo o valor de n3, que foi calculado no inicio do script e não foi redefinida com os valores atuais, então o modo certo de fazer seria:

var n1 = document.getElementById('l')
var n2 = document.getElementById('e')

function calcula() {
  var n3 = n1.value + n2.value;
   document.write(`o resutado e:`+ n3)
}

Quando você pega o valor de um input, ele irá te retornar uma representação daquele valor como string, ou seja um texto, então para fazer operações matemáticas, você precisa converter esses valores em números de novo, e para isso você pode usar o método parseInt se você estiver somando inteiros, ou parseFloat se forem decimais.

function calcula() {
  const v1 = parseFloat(n1.value);
  const v2 = parseFloat(n2.value);
  var n3 = v1 + v2;
  document.write(`o resutado e:`+ n3)
}

Faça atenção pois o Input de tipo number além de números aceita também - e o valor e que é uma constante matemática, tais valores se presentes no seu texto podem gerar um erro durante a conversão para número, e você poderá ver algo como NaN como resultado da sua operação matemática, que significa Not a Number, se isto acontecer significa que os seu valores iniciais não eram números.

Desta forma n3 será recalculado todas as vezes que você chamar o método calcula.

Sugiro que você leia um pouco a documentação disponível pela W3schools, que irá te ajudar muito neste processo inicial. Lá tem vários exemplos como o seu, evite fazer perguntas que já foram respondidas outras vezes aqui ou que você pode encontrar facilmente a resposta em documentações.

HTML DOM Input Number Object

Leo Letto
  • 3,4mil
  • 3
  • 21
  • 47