Skip to main content
1 de 2
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)
}

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