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

[Alberto Nascimento 0]

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 )

[marcosmarcolin 0]

Utilize o onClick do Javascript, veja: https://www.w3schools.com/jsref/event_onclick.asp

 

Ao clicar no botão, você pega os valores dos campos, faz os cálculos e insere o resultado em algum campo ou div, conforme você fizer.

[Omar~ 87]

<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.