Jump to content

Soma de números

Samuel Esteves
 Share

Recommended Posts

Samuel Esteves

Samuel Esteves

Posted
Posted

Estou criando um documento HTML usando a linguagem JavaScript para fazer a soma de dois números. Sou estudante de programação e estou começando agora a aprender conceitos básicos sobre as linguagens JavaScript, HTML e CSS. A página está montada e minha intenção é complementar apenas uma funcionalidade no script: ao apagar ambos ou qualquer um dos números que o usuário escreveu no input para números, a mensagem que mostra qual foi o resultado da soma deve desaparecer. Não sei como fazer, nem por onde começar. Agradeço previamente a ajuda de quem se dispor.

https://github.com/SamuelEstevees/Site-Somador

Irei colar o código aqui também, por questões de facilitação 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Somador</title>
    <style>
        body{
            margin: 0px;
        }
        #cabecalho{
            background-color: #363636;
            width: 100vw;
            height: 10vh;
            color: white;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font: normal 20pt noraml;
        }
        #cabecalho2{
            background-color: #00CED1;
            width: 100vw;
            height: 2vh;
        }
        #corpo{
            background-color: #4F4F4F;
            width: 100vw;
            height: 88vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #conteudo{
            background-color: white;
            color: black;
            width: 300px;
            height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #topoconteudo{
            background-color: #00CED1;
            width: 300px;
            height: 2vh;
        }
        #chaoconteudo{
            background-color: #00CED1;
            width: 300px;
            height: 2vh;
        }
        h1{
            font: normal 17pt normal;
        }
        #txtn1{
            width: 13vw;
        }
        #txtn2{
            width: 13vw;
            margin-top: 5px;
        }
        #botao_somar{
            width: 13.5vw;
            margin-top: 5px;
            background-color: #87CEEB;
        }
        #resposta{
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="cabecalho">
        SITE - SOMADOR DE NÚMEROS
    </div>
    <div id="cabecalho2"></div>
    <div id="corpo">
        <div id="topoconteudo"></div>
        <div id="conteudo">
            <h1>SOMAR NÚMEROS</h1>
            <input type="number" name="txtn1" id="txtn1">
            <input type="number" name="txtn2" id="txtn2">
            <input type="button" value="SOMAR" id="botao_somar" onclick="somar()">
            <div id="resposta"></div>
        </div>
        <div id="chaoconteudo"></div>
    </div>
    <script>
        function somar(){
            var tn1 = document.getElementById("txtn1")
            var tn2 = document.getElementById("txtn2")
            var n1 = Number(tn1.value)
            var n2 = Number(tn2.value)
            var resultado = document.getElementById("resposta")
            var soma = n1 + n2
            var soma =(String(soma)).replace(".", ",")
            resultado.innerHTML = `A soma dos números é: <strong>${soma}</strong>`
        }
    </script>
</body>
</html>

 

site_somador.html

Link to comment
Share on other sites
Gabrieszin

Gabrieszin

Posted
Posted

Oi Samuel

Criei uma função que faz o que você pediu. Basicamente ela funciona da seguinte forma: toda a vez que a função somar() é chamada, ao final dela a função que eu criei, verificarAlteracaoInput(), é chamada e os dois elementos de inputs (que o usuário preenche com os números) são passados como parâmetro.

Uma vez chamada, a função verificarAlteracaoInput() aciona dois eventos de escuta, um para o input com ID txtn1 e outro para o input com ID txtn2.  Saiba mais sobre eventos de escuta aqui. 

Quando um desses inputs sofrem alguma alteração, todo o conteúdo dentro da div com ID resposta é limpo. 

O código a seguir é como ficou o bloco <script></script>. Daria pra reduzir, mas acredito que eu iria te confundir. Espero ter ajudado, bons estudos!

  

<script>
        function somar(){
            var tn1 = document.getElementById("txtn1")
            var tn2 = document.getElementById("txtn2")
            var n1 = Number(tn1.value)
            var n2 = Number(tn2.value)
            var resultado = document.getElementById("resposta")
            var soma = n1 + n2
            var soma =(String(soma)).replace(".", ",")
            resultado.innerHTML = `A soma dos números é: <strong>${soma}</strong>`

            //A função verificarAlteracaoInput é chamada e como parâmetro os dois elementos de inputs são passados
            verificarAlteracaoInput(tn1, tn2);
        }

        // Função acionada pela função somar()
        function verificarAlteracaoInput(input1, input2){
          var resultado = document.getElementById("resposta");

          // Função de escuta para o evento do tipo input no elemento com id txtn1
          input1.addEventListener('input', () => {
            //Limpa todo o contéudo HTML de resultado
            resultado.innerHTML = '';
          })

          // Função de escuta para o evento do tipo input no elemento com id txtn2
          input2.addEventListener('input', () => {
            resultado.innerHTML = '';
          })
        }
    </script>

 

Link to comment
Share on other sites
Samuel Esteves

Samuel Esteves

Posted
  • Author
Posted

Oi Gabriel, tudo bem? Agradeço o retorno.

No caso, para que a função de alterar o input seja de fato acionada, eu teria que ter declarado a variável para input1 e input2 com o getElementById antes, pois só assim eu conseguiria verificar se o valor do input foi alterado, certo?

De qualquer forma, muito obrigado pela ajuda, isso fortalece em muito meus estudos.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing


×
×
  • Create New...