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.