Somar valores de vários inputs/checkbox

[Telles85]

Bom dia, sou iniciante na programação e tenho este exercício teste. Preciso de apresentar o valor total e dinâmico de um orçamento num único campo, essa está a ser a dificuldade no momento.

Como já pedi ajuda aqui antes e resolveram a questão de somar os checkbox seleciondados, queria apresentar o total no mesmo campo (id="valor-orcamento").

O desconto em percentagem do prazo dos meses é sobre o total do somatório ()Option + Checkboxes) - desconto em meses );

Agradecia a ajuda, qualquer explicação para me ajudarem questionem por favor...

<!-- Pedido de Orçamento -->

    <div class="container-fluid mb-5">
        <div class="row">

            <div class="col-lg-2"></div>
            <div class="col-lg-8 mb-5">
                <div class="caixa-orcamento pb-5">
                    <form action="" method="POST" onchange="atualizarPreco()" name="formulario">
                        <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3>
                        <table class="m-auto">
                            <tr>
                                <td class="fw-bold labels">Tipo de página web:</td>
                                <td>
                                    <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente -->
                                    <select name="tipopagina" id="tipopagina" required>
                                        <option value="0"></option>
                                        <option value="400" id="estatica">Estática</option>
                                        <option value="500" id="dinamica" >Dinâmica</option>
                                        <option value="600" id="loja" >Loja</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% -->
                                <td class="fw-bold labels">Prazo em meses:</td>
                                <td><input type="number" id="prazo"></td>
                            </tr>
                        </table>
                        <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5>

                        <!-- Cada check selecionado soma 400 ao valor total -->
                        <div class="checkbox labels text-center mb-5">
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Quem Somos
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Onde estamos
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Galeria de fotografias <br>
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">eCommerce
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Gestão Interna
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Notícias
                            <input type="checkbox" class="checkbox" id="check" name="separadores" value="400" onchange="somar(this)">Redes Sociais
                        </div>
                        <h5 class="text-center labels">Orçamento estimado:</h5>
                        <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p>
                        <div class="resultado-orcamento text-center">

                            <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento -->
                            <input type="text" id="valor-orcamento" name="valor-orcamento" value="">
                            <br>
                            <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button>
                            <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-2"></div>

        </div>
    </div>

// Atualizar Orçamento consoante as alterações

function atualizarPreco() {
    var preco = 0;
    // Tipo de página Selecionada com preços Diferentes

    if (document.getElementById('tipopagina').value == '400') {
        preco = 400;
    }
    if (document.getElementById('tipopagina').value == '500') {
        preco = 500;
    }
    if (document.getElementById('tipopagina').value == '600') {
        preco = 600;
    } 
    
    // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%)

    var prazo = document.getElementById('prazo').value;
    if (prazo == 0) {
        preco = preco + 0;
    } else if (prazo == 1) {
        preco = preco - (preco * 0.05);
    } else if (prazo == 2) {
        preco = preco - (preco * 0.10);
    } else if (prazo == 3) {
        preco = preco - (preco * 0.15);
    } else {
        preco = preco - (preco * 0.20);
    }

    document.getElementById('valor-orcamento').value = preco;

    // Código que soma 400€ ao total por cada checkbox selecionado

    var soma1 = 0;
    function somar(check) {
        if ( check.checked ){
            soma1 += 1*check.value;    
        } else {
            soma1 -= 1*check.value;
        } 

        document.getElementById("valor-orcamento").value = soma1;
    }
    
}

[Ivo Vicente]

Viva, 

Assim por alto, estas a fazer a conta do tipo de página, depois aplicas o desconto e passas o valor para o #valor-orcamento

No entanto, na função somar, estás novamente a redefinir o valor apenas para essas ações.

Penso que devias fazer os cálculos todos seguindo, pela ordem da formula e no fim aplicas os cálculos e passas o valor para #valor-orcamento

 

Ou seja, o preco é uma variável que já estas a definir o seu valor, eu passava a lógica do desconto para outra variável, e a soma dos extras que agora usas a soma1 usava no final do procedimento para então apresentar o calculo final.

 

Espero ter ajudado alguma coisa

Edited May 3, 2022 at 09:13 PM by Ivo Vicente

[Ivo Vicente]

Já agora, não se onde é a formação/curso que estás a fazer deixo só umas sugestões para "veres" o código de outra maneira

// Antes
var preco = 0;

if (document.getElementById('tipopagina').value == '400') {
    preco = 400;
}
if (document.getElementById('tipopagina').value == '500') {
    preco = 500;
}
if (document.getElementById('tipopagina').value == '600') {
    preco = 600;
} 

// DEPOIS
// O value do elemento já tem o valor do tipo de página
// basta converter em Inteiro (parseFloat - para decimais)
var preco = parseInt(getElementById('tipopagina').value);

// Antes
var prazo = document.getElementById('prazo').value;
    if (prazo == 0) {
        preco = preco + 0;
    } else if (prazo == 1) {
        preco = preco - (preco * 0.05);
    } else if (prazo == 2) {
        preco = preco - (preco * 0.10);
    } else if (prazo == 3) {
        preco = preco - (preco * 0.15);
    } else {
        preco = preco - (preco * 0.20);
    }

// DEPOIS
// Usar o parseInt para remover a possibilidade de alguem escrever 1.3 meses por exemplo
var prazo = parseInt(document.getElementById('prazo').value;)
// -- Opção 1 com if/else
var desconto = 0;
// Como o prazo de 4 meses é o maximo, pode logo retornar o desconto
if(prazo >= 4){
    desconto = 20
}else{
// Caso contario o valor é fixo por mês, basta multiplicar
    desconto = prazo*5
}

// -- Opção 2 operação ternária
var desconto = (prazo>=4) ? 20 : prazo*5;

// FINAL - aplicar desconto ao preço onde bem entenderes

Com estas duas opções, encolhes o processamento do valor final a menos de 10 linhas :-)

Edited May 3, 2022 at 09:45 PM by Ivo Vicente

[Telles85]

Olá Ivo, desde já obrigado pela tua atenção às minhas dúvidas e pelo teu tempo.

Sim, claro que ajudaste, a questão do código ficar mais limpo tens toda a razão, ainda sou iniciante então terei que melhorar aí.

A minha dúvida é naquele código em que selecionamos as checkbox e somamos as selecionadas, aquele código está dentro de uma função, então penso que por causa disso no consigo pegar no resultado e aplicar a soma com o "tipo de página". Não sei se estarei certo na descrição 😄

Porque depois de conseguir ter o output no campo da soma do "tipo de pagina" + "checkboxes selecionadas" seria passar o codigo do desconto no valor total. 

[Ivo Vicente]

Viva

Sim, tens que passar a função das checkboxes para fora da função de calcular totais, e passas também a variável soma1 para fora, tornando-a uma variável global.

Depois  dentro da função de calcular totais desde que não faças outra variável com o mesmo nome, essa função vais buscar o valor da variável global.

 

Tens de atender o que é e como funciona o scopes em JavaScript, podes ler este ebook que explica isso You don't knock JS ebook

[Telles85]

No meu exercício desse formulário de orçamento eu chamo a função onchange="atualizarPreco" sempre que o formulário sofre alteração. No fundo eu terei que criar um evento onchange individual e apenas fazer os cálculos no fim?

É que na prática para mim ainda é um pouco confuso, embora estou a adorar entrar neste mundo, isto é lindo, pelo raciocínio que envolve, mas requer muito estudo e muita prática.

É que gerar o código por exemplo, da seleção das checkboxes sem ser numa função está difícil para mim...

[Ivo Vicente]

O mundo da programação tem tanto de bonito como de complexo, as vezes levamos muito tempo a perceber conceitos e um dia ao aplicar faz-se luz. Importa não parar, fazer coisas e tentar perceber de podes fazer melhor. Porque existem várias maneiras possíveis de resolver o mesmo problema.

 

Em relação ao teu caso, não tens que colocar um eventListener para todos os elementos do formulário, chamar a função quando o formulário sofre alterações serve perfeitamente.

Para te resolver já a questão é tirares a função que faz contas com as checkboxes para fora da função do cálculo, assim como a variável que essa função afeta o soma1.

 

Depois na função do cálculo, no fim pois vais buscar o preço, o desconto se usares a variável soma1 vais ter valores.

 

Em JS quando a função não tem internamente a variável, comeca a subir na hierarquia até encontrar a variável e lê o valor dela, ou dá undefined se não existir.

 

Outra abordagem ao problema, criar funções individuais, por exemplo getPrice getDiscount que são chamadas dentro da função principal para lhe devolver os números e só tem que calcular o total, ou seja cada função tem apenas e só uma tarefa bem definida.

 

Boa continuação nessa aprendizagem

[Telles85]

Vou tentar a ver se consigo, sei que parece fácil mas para quem começa é uma dor de cabeça 😄

Como já estou um bocado baralhado não sei se conseguirei.

Obrigado pela tua resposta!