Ir para conteúdo
Alberto Nascimento

Como calcular em JavaScript sem precisar atualizar a página ( pode ser através de um botão )

Recommended Posts

Estou desenvolvendo um sistema onde preciso em um formulário calcular realizar o cálculo de determinados campos como abaixo exemplificado:

 

( campo01 ) * ( campo02 ) = ( resultado01 )

( campo03 ) * ( campo04 ) = ( resultado02 )

 

( campo05 ) + ( campo06 ) = ( resultado03 )

 

( resultado01 ) + ( resultado02 ) + ( resultado03 ) = ( totalgeral )

Compartilhar este post


Link para o post
Compartilhar em outros sites
<div id="resultado"></div>
<input type="text" id="campo-a" />
<input type="text" id="campo-b" />
<select id="tipo">
    <option value="">Selecione o tipo de calculo</option>
    <option value="subtracao">Subtração</option>
    <option value="adicao">Adição</option>
    <option value="multiplicacao">Multiplicação</option>
    <option value="divicao">Divisão</option>
</select>
<button onclick="calcular()">Calcular</button>

<script>
    var campoA = document.getElementById('campo-a'),
        campoB = document.getElementById('campo-b'),
        resultado = document.getElementById('resultado'),
        tipo = document.getElementById('tipo');

    function calcular() {
        var valorA = campoA.value,
            valorB = campoB.value,
            calculo = tipo.value,
            calcularA = parseFloat(valorA),
            calcularB = parseFloat(valorB);

        if (isNaN(valorA) || isNaN(valorB)) {
            resultado.innerText = 'Espera aí, isso aqui é uma calculadora! Use somente números';
        }
        switch (calculo) {
            case 'subtracao':
                resultado.innerText = calcularA - calcularB;
                break;
            case 'adicao':
                resultado.innerText = calcularA + calcularB;
                break;
            case 'multiplicacao':
                resultado.innerText = calcularA * calcularB;
                break;
            case 'divicao':
                resultado.innerText = calcularA / calcularB;
                break;
            default :
                resultado.innerText = 'Ei!! Selecione que tipo de calculo vai fazer';
                break;
        }
    }
</script>

 

Não testei, apenas escrevi aqui, mas funciona.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.