Somar valores de <input>s. Dica 31

Bem vindos a mais uma dica de JavaScript da Em Busca do Código, e como o título já diz vamos somar valores digitados em <input>s diferentes. Este exercício foi sugerido em um dos nossos vídeos de JS, caso tenha uma sugestão (de JS), pode comentar também.

Sem mais delongas temos três arquivos iniciais, o HTML:

Algo importante nesse arquivo inicial é o arquivo .js linkado, este arquivo está em branco. O arquivo reset.css apenas reseta as configurações padrões dos navegadores, e o arquivo somar.css apenas deixa um pouco mais bonito o que formos editando no HTML, caso queira, a seguir temos o código fonte do arquivo somar.css:

section {
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 100vh;
    background-color: aqua;
}
.centro {
    top: 50%;
    left: 50%;
    transform: translateY(35vh);
}
.resultado {
    font-size: 3em;
}

Em nosso HTML, dentro da tag body vamos inserir uma <section>.

E dentro desta <section> vamos inserir uma <div>, já informando uma classe que dei a ela o nome de centro.

Dentro desta <div> vamos criar dois <input>s com uma classe para cada <input>, sendo um do tipo text e outro do tipo number, inserimos também uma quebra de linha após cada <input>.

Só para deixar mais bonito, antes de cada <input> escrevemos valor um e valor dois.

Primeiro valor:
<input class="num1" type="text"><br>
Segundo valor:
<input class="num2" type="number"><br>

Logo depois do segundo <input> criamos um botão, já declarando um evento onclick já informando uma função que iremos criar no JS.

<button onclick="clicar()">Resultado</button>

Eu criei essa função com o nome de clicar, você pode cria-la com o nome que quiser, assim como modificar os nomes das classes. Depois do botão criamos uma tag p que será utilizada para mostrar o resultado da soma.

Para realizar este exercício eu estou utilizando o editor Brackets e o navegador Firefox, mas você pode utilizar o de sua preferência. Terminamos nosso HTML, agora vamos ao JS.

JavaScript

Dentro do arquivo JS criamos uma função chamada clicar, a mesma já informada em nosso .html. Nesta função criamos duas variáveis que podem ter qualquer nome, e vamos atribuir a elas o valor digitado em cada <input>.

function clicar() {
var num1 = document.querySelector(".num1").value;
var num2 = document.querySelector(".num2").value;
}

Ainda dentro da função criamos uma variável para o resultado.

var resultado =

Sabemos que serão digitados apenas números, mas se escrevermos apenas:

var resultado = num1 +num2;

Os números serão concatenados e não somados, Contra isso podemos utilizar parseInt, para que nossos números sejam interpretados como números e sejam somados e não concatenados.

var resultado = parseInt(num1) + parseInt(num2);

A partir desse momento utilizamos um simples querySelector para mostrarmos o resultado em nossa tag p.

document.querySelector(".resultado").innerHTML = resultado;

Testando em nosso navegador vemos que os valores estão sendo somados.

A seguir temos o código fonte HTML completo:

<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <title>Somar valores de input</title>
        <meta charset="utf-8">
        <script src="somar.js"></script>
        <link rel="stylesheet" href="somar.css">
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <section>
            <div class="centro">
                Primeiro valor:
                <input class="num1" type="text"><br>
                Segundo valor:
                <input class="num2" type="number"><br>
                <button onclick="clicar()">Resultado</button>
                <p class="resultado"></p>
            </div>
        </section>
    </body>
</html>

E agora o código fonte JavaScript:

function clicar() {
    var num1 = document.querySelector(".num1").value;
    var num2 = document.querySelector(".num2").value;

    var resultado = parseInt(num1) + parseInt(num2);
    document.querySelector(".resultado").innerHTML = resultado;
}

Espero que esta dica tenha ajudado e caso você tenha clicado apenas por curiosidade espero que tenha gostado da leitura, essa dica fica por aqui e até mais.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.