Subtract value using JS

Question

Until now my code was using a sum of values

Example:

const inputs = [...document.querySelectorAll("input[class='serv']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const serv = res.querySelector('[name="serv"]');

inputs.forEach(x => x.addEventListener("change", () => {
    total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
    serv.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
}));

<div id="resultado" class="col">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text bg-primary text-white">Serviços</span>
        </div>
        <input type="text" class="input-group-text" placeholder="0,00" name="total" value="" readonly="readonly">
        <input type="hidden" name="serv" value="">
    </div>
</div>
<div class="form-group">
    <label for="">Desconto: </label>
    <select class="form-control form-control-sm" name="desconto">
        <option value=""></option>
        <option value="5%">Desconto Pai e Filho</option>
        <option value="10%">Amigo da Hora</option>
        <option value="15%">Familia</option>
    </select>
</div>
<br>

<div class="row">
    <table class="table">
        <tbody>
            <tr>
                <td><input type=checkbox class='serv' name="" value="10"> Serviço</td>
                <td>10</td>
            </tr>
            <tr>
                <td><input type=checkbox class='serv' name="" value="15"> outro Serviço</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</div>

i would like to know how to include a discount when it is selected.

Answer 1

First I would advise to use the discount values in decimals, example 5% = 0.05, 10% = 0.1, 15% = 0.15... etc...

const desconto = res.querySelector('[name="desconto"]');

desconto.addEventListener("change", () => {
    var total = serv.value;         // Pega o total
    total = total + total*desconto; // Calcula o Desconto
    total = total.toFixed(2);       // Coloca em formato de decimal com 2 casas
    campo.value = total;            // Preenche o campo que você quer preencher com o valor
})

Then it would be necessary to put a field to display the final value that is in the total variable...

Answer 2

Try to do it this way

-

const inputs = [...document.querySelectorAll("input[class='serv']")];
const res = document.getElementById("resultado");
const total = res.querySelector('[name="total"]');
const serv = res.querySelector('[name="serv"]');
const combo = document.getElementById("desconto");
inputs.forEach(x => x.addEventListener("change", () => {
    total.value = inputs.filter(el => el.checked).reduce((sum, el) => sum + Number(el.value), 0);
    serv.value = inputs.filter(el => el.checked).map(el => el.name).join(',');
	if (combo.value > 0){
		if (total.value > 0){
			total.value = total.value - (total.value * combo.value);
		}
	}
	
}));

combo.addEventListener("change", () => {
  if (total.value > 0){
    var desconto = (serv.value * combo.value);
	total.value = total.value - (total.value * combo.value);
  }
});

<div id="resultado" class="col">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text bg-primary text-white">Serviços</span>
        </div>
        <input type="text" class="input-group-text" placeholder="0,00" name="total" value="" readonly="readonly">
        <input type="hidden" name="serv" value="0">
    </div>
</div>
<div class="form-group">
    <label for="">Desconto: </label>
    <select class="form-control form-control-sm" name="desconto" id="desconto">
        <option value="0"></option>
        <option value="0.05">Desconto Pai e Filho</option>
        <option value="0.010">Amigo da Hora</option>
        <option value="0.015">Familia</option>
    </select>
</div>
<br>

<div class="row">
    <table class="table">
        <tbody>
            <tr>
                <td><input type=checkbox class='serv' name="" value="10"> Serviço</td>
                <td>10</td>
            </tr>
            <tr>
                <td><input type=checkbox class='serv' name="" value="15"> outro Serviço</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</div>