Somar valores inputs/checkbox

[marco_fcp 0]

Estou tentando criar este código para quando escolher uma option no select, ele pegar nesse valor, e somar com quantos checksbox o utilizador quiser. Aí, no fim, no campo do valortotal conforme a option que escolher, irá subtrair um desconto do valor total. Penso ter feito os scripts, mas não estou a conseguir o resultado final com o desconto, dinâmico no mesmo campo.

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

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;
    }
    
}

 

[washalbano 54]

<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" min='0' 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" name="separador-1" value="400">Quem Somos
            <input type="checkbox" class="checkbox" name="separador-2" value="400">Onde estamos
            <input type="checkbox" class="checkbox" name="separador-3" value="400">Galeria de fotografias <br>
            <input type="checkbox" class="checkbox" name="separador-4" value="400">eCommerce
            <input type="checkbox" class="checkbox" name="separador-5" value="400">Gestão Interna
            <input type="checkbox" class="checkbox" name="separador-6" value="400">Notícias
            <input type="checkbox" class="checkbox" name="separador-7" value="400">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>

const eTipoPagina = document.getElementById('tipopagina')
const eValorOrcamento = document.getElementById('valor-orcamento')

// elementos que, ao serem alterados, devem atualizar o preço
const eObserved = document.querySelectorAll('#tipopagina, #prazo, div.checkbox input[type="checkbox"]')

for (const element of eObserved) {
  element.addEventListener('input', atualizarPreco)
}

function atualizarPreco() {
  let preco = eTipoPagina.value

  // 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)
  }

  // percorre cada checkbox marcado e acrescenta o valor ao preço
  for (const checkBox of document.querySelectorAll('div.checkbox input[type="checkbox"]')) {
    if (checkBox.checked) {
      preco = +preco + +checkBox.value
    }
  }


  eValorOrcamento.value = preco
}

 

[marco_fcp 0]

Muito obrigado Washalbano, para quem é iniciante você não imagina como por vezes pequenas coisas conseguem criar confusão e dúvida. Resultou, vou estudar o código que você me passou para entender ele.

Muito obrigado mesmo !!! Abraço de Portugal !!!

[washalbano 54]