0

Criei uma simples calculadora com HTML5, CSS e JavaScript. Porém, quando vou calcular, o valor do primeiro campo é somado a ele mesmo, e não com o segundo campo. Portanto, quando vou realizar o cálculo de 4 + 7, o resultado dá (8)?

Segue o código:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculator</title>
    <style>
        body {
            font: normal 15pt Arial;
        }

        input {
            width: 100px;
            border-radius: 2px;
        }

        div#res {
            margin-top: 20px;
        }

        button {
            background-color: green;
            color: white;
        }
    </style>
</head>

<body>
    <h3> SOMANDO NÚMEROS </h3>
    <input type="number" name="txtn1" id="txtn1"> +
    <input type="number" name="txtn2" id="txtn2">
    <input type="button" value="Somar" onclick="somar()">
    <div id="res">Resultado:</div>

    <script>
        function somar() {
            var tn1 = window.document.getElementById('txtn1')
            var tn2 = window.document.getElementById('txtn2')
            var res = window.document.getElementById('res')
            var n1 = Number(tn1.value)
            var n2 = Number(tn1.value)
            var s = n1 + n2
            res.innerHTML = `A soma entre ${n1} e ${n2} é igual a ${s}`
        }
    </script>
</body>

</html>

1
  • A resposta resolveu sua dúvida? Acha que pode aceitá-la? Veja o tour se não souber como faz. Isso ajudaria muito indicar que a solução foi útil para você. Também pode votar em qualquer pergunta ou resposta que achar útil no site todo (quando tiver 15 pontos).
    – Maniero
    Commented 26/07/2019 às 23:55

1 Resposta 1

1

O resultado do seu código já dá a dica de qual é o erro. Ele diz que "a soma de 4 e 4 é igual a 8", portanto você não está lendo sua tela. Aí fica claro que está pegando o mesmo número, o primeiro digitado e somando eles.

Este código é complexo demais e por isso provavelmente se perdeu por causa disto, olha esse trecho:

var n1 = Number(tn1.value)
var n2 = Number(tn1.value)

Coloquei no GitHub para referência futura.

As duas variáveis estão sendo inicializadas com o mesmo dado, aí você usa as duas para somar.

Simplifique o código e não terá problemas assim tão facilmente.

1
  • Nossa! Caro Maniero, realmente, as duas variáveis estavam com o mesmo dado. Muito obrigado, tbm pela dica. Vou tentar simplificar o código. Sucesso pra você, parceiro! =)
    – ttttiopo
    Commented 6/07/2019 às 17:44

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .