Olá, Jorge! Como vai?
Peço desculpas pela demora em te responder! Que excelente que você insistiu e mandou a sua dúvida aqui novamente. Esse assunto é justamente a "ponte" que une o visual do seu site ao comportamento dele, e entender isso vai clarear a sua mente de vez.
Respondendo direto à sua dúvida: eu não cheguei a olhar o seu código HTML porque você acabou colando apenas a parte do JavaScript na sua primeira postagem! Mas não tem problema nenhum, vamos construir essa ponte juntos agora.
O que é essa tal de "Referência de Elementos"?
Pense no seu arquivo HTML como o esqueleto de uma casa e no JavaScript como o eletricista.
Se o eletricista quer colocar um interruptor para acender uma lâmpada específica na sala, ele precisa saber exatamente qual é o fio daquela lâmpada, certo? Se ele puxar o fio errado, vai acender a luz da cozinha.
No desenvolvimento web, a Referência de Elementos é o ato de fazer o JavaScript encontrar e "segurar" um pedaço do seu HTML para conseguir interagir com ele. Nós fazemos isso usando o ID (que funciona como o CPF único daquela tag HTML).
Quando você escreve isso no JavaScript:
var tn1 = document.getElementById('txtn1')
Você está dizendo: "JavaScript, vá lá no documento HTML, procure a tag que tem o CPF (id) chamado 'txtn1' e guarde ela dentro da caixinha 'tn1' para eu usar".
Como deve ser o seu HTML para o JavaScript funcionar?
Para a sua função somar() funcionar perfeitamente, as tags do seu arquivo HTML precisam ter exatamente os mesmos IDs que você chamou no JavaScript (txtn1, txtn2 e res).
Veja abaixo um exemplo prático de como deve estar a estrutura do seu código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Somando Valores</title>
</head>
<body>
<h1>Somando Valores</h1>
<input type="number" id="txtn1"> +
<input type="number" id="txtn2">
<button onclick="somar()">Somar</button>
<div id="res">Resultado</div>
<script>
// O seu código JavaScript corrigido entra aqui:
function somar() {
var tn1 = document.getElementById('txtn1')
var tn2 = document.getElementById('txtn2')
var res = document.getElementById('res')
var n1 = Number(tn1.value)
var n2 = Number(tn2.value)
var s = n1 + n2
res.innerHTML = `A soma entre ${n1} e ${n2} é igual a **${s}**`
}
</script>
</body>
</html>
Onde a mágica acontece:
- Se no seu HTML você esquecer de colocar
id="txtn1" ou digitar diferente (como id="caixa1"), o JavaScript vai procurar por txtn1, não vai achar nada, e o seu código vai dar um erro de undefined ou null.
Monte o seu arquivo HTML seguindo essa estrutura de IDs idêntica e faça o teste! Você vai ver os números se somando na tela na mesma hora.
Espero que possa ter lhe ajudado!