-3

Estou montando uma calculadora de adicionais para um produto, porém os adicionais são calculados em porcentagem. Por exemplo:

Se o produto for R$ 50,00 e estiver marcado o checkbox que adiciona 40%, deve alterar a div preço para R$ 70,00.

Se caso estiver marcado os dois primeiros checkbox (40% e 15%), o valor esperado é R$ 127,50. A porcentagem deve ter como base o preço original (no caso de dois ou mais adicionais marcados).

<input class="form-check-input" type="checkbox" value="40" id="adicional1">
  <label class="form-check-label" for="defaultCheck1">
    Adicional 1 - <strong>+40%</strong>
  </label>

<input class="form-check-input" type="checkbox" value="15" id="adicional2">
  <label class="form-check-label" for="defaultCheck1">
    Adicional 2 - <strong>+15%</strong>
  </label>

<input class="form-check-input" type="checkbox" value="30" id="adicional3">
  <label class="form-check-label" for="defaultCheck1">
    Adicional 3 - <strong>+30%</strong>
  </label>

<div id="price">R$ 50,00</div>

O código que tentei adaptar e não funcionou, pois ele soma os valores e não a porcentagem.

$(document).ready(function(){
    $('.form-check-input').click(function (){
        var total = 0;
        $('.form-check-input:ckecked').each(function(){
            total += parseInt($(this).val());
            var formatado = total.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"});
        });
        $('#price').html(formatado);
    });
});

Como transformar esse código para que some porcentagem?

2
  • Antes de mais nada, não use cumprimentos ou saudações, veja que tipo de comportamento é esperado dos usuários? e como criar um Exemplo Mínimo, Completo e Verificável para poder elaborar uma pergunta BOA e CLARA 19/07/2021 às 5:02
  • para fazer esses "adicionais" é necessário fazer o cálculo de porcentagem primeiro (para obter o resultado correto, se não irá apenas somar os valores) a interpretadora não entende que o % refere-se a porcentagem, por isso o cálculo valor * (porcentagem / 100) que neste caso 50 * (40 / 100) = 20 19/07/2021 às 5:05

1 Resposta 1

0

Pelo que entendi da sua pergunta..

é que você deseja calcular valores com adicionais (pelo visto descontos e promoções). Seu código está apenas somando os valores e não as porcentagens, o interpretador não entende que % refere-se a porcentagem (não neste caso). Sua pergunta você não descreve a sua necessidade ou onde você quer chegar, então por isso sugiro que você NÃO DEIXE de ver Como criar um exemplo Mínimo, Completo e Verificável e Como fazer uma boa pergunta?


Portanto, fiz toda parte do com as devidas funcionalidades, desde de calcular a porcentagem á somar e imprimir na página!

vale apena dar uma olhada na documentação MDN Web Docs: Matemática básica no JavaScript para você entender um pouco como funciona os operadores e tudo mais..

var valor = conversor(document.querySelector('#price').innerHTML); // obtem o valor impresso
var valor_inicial = conversor(document.querySelector('#price').getAttribute('valor-inicial')); // obtem o valor inicial armazenado (nao sofre alterações)

// vai percorrer todos os inputs do tipo checkbox (referentes aos adicionais)
document.querySelectorAll('input[type=checkbox]').forEach(input => {
    input.addEventListener('click', function(e) {
        if (input.checked) { // ao ser marcado
            var porcentagem = valor_inicial * (conversor(input.value) / 100); // vai calcular a porcentagem sobre o valor inicial
            valor = valor + porcentagem; // soma o valor com a porcentagem calculada
            document.querySelector('#price').innerHTML = formatCurrency.format(valor); // imprime o resultado na div
        } else { // ao ser desmarcado
            var porcentagem = valor_inicial * (conversor(input.value) / 100); // vai calcular a porcentagem sobre o valor inicial
            valor = valor - porcentagem; // subtrai o valor da porcentagem calculada (resultado no valor anterior)
            document.querySelector('#price').innerHTML = formatCurrency.format(valor); // imprime o resultado na div
        }
    });
})

// vai tratar os valores para que não ocorra erros nos calculos (ex: NaN, undefined)
function conversor(input) {
    if (typeof input == 'number')
        return input;
    
    let res;
    input = input.toString().replace(/[^0-9,.]/g, '');
    if (input.match(/(,)\d{2}$/)) {
        res = input.replace(/\./g, '').replace(',', '.')
    } else {
        res = input.replace(',', '');
    }

    return parseFloat(res);
}


// formata o resultado final para ser impresso em moeda real
const formatCurrency = new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
});
<input class="form-check-input" type="checkbox" value="40" id="adicional1">
<label class="form-check-label" for="defaultCheck1">
  Adicional 1 - <strong>+40%</strong>
</label>

<input class="form-check-input" type="checkbox" value="15">
<label class="form-check-label" for="defaultCheck1">
  Adicional 2 - <strong>+15%</strong>
</label>

<input class="form-check-input" type="checkbox" value="30">
<label class="form-check-label" for="defaultCheck1">
  Adicional 3 - <strong>+30%</strong>
</label>

  <br />
  
<div id="price" valor-inicial="50,00">R$ 50,00</div>

Preservei seu código HTML para não fugir muito do seu contexto!


Nota! foi adicionado alguns detalhes..

A função conversor() para tratar quaisquer entradas de texto ou números não-formatados. Ao desmarcar as checkboxs o valor é retornado ao anterior (sem o adicional independente de quantos estejam marcados, se todos forem desmarcados o valor continuará o mesmo de inicialmente).

E foi adicionado a função getAttribute() que retornará o valor do argumento específico do elemento, ou seja, o valor_inicial pois não teria outra forma de obter o real valor do "produto" após feitas as alterações.

6
  • É quase isso. No exemplo de código que foi enviado, quando desmarcado o adicional, o valor não retorna ao que era antes do cálculo. Obrigado pela lição, desde já. 19/07/2021 às 6:12
  • @DeyvidHenriquePereira você quer que além de incrementar os adicionais, os remove-lo caso desmarque os checkboxs? 19/07/2021 às 6:14
  • Sim, o usuário pode querer não adicionar aquele adicional ao produto. Então o cálculo precisa ser flexível. 19/07/2021 às 6:16
  • é só pegar o valor = valor - porcentagem e subtrair que estará removendo a porcentagem do valor. Nota! encontre uma forma de armazenar sempre os valores a cada vez que adiciona-los, assim tem como "saber" o valor antes de adicionar a porcentagem. 19/07/2021 às 6:23
  • Se lhe ajudou de alguma forma, se possível marque a resposta como aceita e funcional! fica abaixo dos votos, assim poderá está ajudado outros.. 19/07/2021 às 6:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .