Jump to content

Soma de números

Samuel Esteves

Por Samuel Esteves
em JavaScript

 Compartilhar

Postagens Recomendadas

Samuel Esteves

Samuel Esteves

Postado
Postado

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
Compartilhe em outros sites
Gabrieszin

Gabrieszin

Postado
Postado

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
Compartilhe em outros sites
Samuel Esteves

Samuel Esteves

Postado
  • Autor(a)
Postado

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
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...