8
respostas

mais duvidas arrebatadora

Eu estou produzindo um código html com javaSript para fazer um documento interativo com botão mais a interação por algum motivo que eu não sei a interação não esta funcionado poderia me dizer onde eu errei, para mais de tales lei o códigos abaixo!

Somando Valores

Resultado

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

8 respostas

Olá, Jorge. Como vai?

Analisando o seu código, identifiquei três pontos específicos que estão impedindo o funcionamento da sua soma. Em JavaScript, pequenos detalhes na escrita (sintaxe) fazem toda a diferença para o navegador entender o comando.

Aqui estão os ajustes necessários:

  • O método Number: No seu código, você escreveu number com "n" minúsculo. O correto em JavaScript é Number (com "N" maiúsculo).
  • Template Literals: Para usar a interpolação de variáveis com ${}, você não pode usar aspas comuns. É obrigatório o uso de crases (backticks), assim: `A soma entre...`.
  • Referência de Elementos: Certifique-se de que no seu HTML os campos de entrada tenham os IDs txtn1 e txtn2, e o local do resultado tenha o ID res.

Aqui está o trecho corrigido para você copiar e testar:

function somar() {
    var tn1 = document.getElementById('txtn1')
    var tn2 = document.getElementById('txtn2')
    var res = document.getElementById('res')
    
    // O 'N' deve ser maiúsculo
    var n1 = Number(tn1.value)
    var n2 = Number(tn2.value)
    
    var s = n1 + n2
    
    // Utilize crases para que o ${} funcione corretamente
    res.innerHTML = `A soma entre ${n1} e ${n2} é igual a **${s}**`
}

Uma dica extra: se você não converter os valores com Number(), o JavaScript pode acabar "juntando" os números como se fossem texto (ex: 1 + 1 viraria 11). Com essa conversão que você fez (corrigindo para o N maiúsculo), o cálculo funcionará perfeitamente!

Espero que possa ter lhe ajudado!

Oi eu sou o Jorge e sou muito grato pela ajuda mas sobre ,Referência de Elementos, eu não entendi direito do que se trata poderia me explicar melhor do que é este assunto?Além disso eu notei que você mostro os códigos javaScript,isto me deixou com uma duvida, mas não html isso significa que não tem erro no html ou que você esqueceu?

Oi eu sou o Jorge e sou muito grato pela ajuda mas sobre ,Referência de Elementos, eu não entendi direito do que se trata poderia me explicar melhor do que é este assunto?Além disso eu notei que você mostro os códigos javaScript,isto me deixou com uma duvida, mas não html isso significa que não tem erro no html ou que você esqueceu?

Oi eu sou o Jorge e sou muito grato pela ajuda mas sobre ,Referência de Elementos, eu não entendi direito do que se trata poderia me explicar melhor do que é este assunto?Além disso eu notei que você mostro os códigos javaScript,isto me deixou com uma duvida, mas não html isso significa que não tem erro no html ou que você esqueceu?

Oi eu sou o Jorge e sou muito grato pela ajuda mas sobre ,Referência de Elementos, eu não entendi direito do que se trata poderia me explicar melhor do que é este assunto?Além disso eu notei que você mostro os códigos javaScript,isto me deixou com uma duvida, mas não html isso significa que não tem erro no html ou que você esqueceu?

Oi eu sou o Jorge e sou muito grato pela ajuda mas sobre ,Referência de Elementos, eu não entendi direito do que se trata poderia me explicar melhor do que é este assunto?Além disso eu notei que você mostro os códigos javaScript,isto me deixou com uma duvida, mas não html isso significa que não tem erro no html ou que você esqueceu?

Oi eu sou o Jorge e sou muito grato pela ajuda mas sobre ,Referência de Elementos, eu não entendi direito do que se trata poderia me explicar melhor do que é este assunto?Além disso eu notei que você mostro os códigos javaScript,isto me deixou com uma duvida, mas não html isso significa que não tem erro no html ou que você esqueceu?

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!