Add, Subtract, Extract Subtotal and Final Total with Javascript/Jquery

Question

How to subtract the value of the "subtotal" field and how to sum all "subtotals" to generate the final total of this code?

<div class="row">

  <div class="col-md-2"></div>

  <div class="col-md-8" style="border:solid 1px #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding:1%;">

    <!-- SELA BROCA AZUL -->
    <div class="input-group mx-auto text-center justify-content-center align-self-center">

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <label>Kit Sela Broca<SUP>®</SUP> Azul</label>
      </div>

      <div class="col-md-4 mx-auto justify-content-center align-self-center">

      <script type="text/javascript">

        var xAzul = 0;
        var xRosa = 0;
        var xVerde = 0;
        var xTransparente = 0;
        var xColorido = 0;
        var Valor = 150;

        function adicionarAzul() {
          document.getElementById('quantidadeAzul').innerHTML = ++xAzul;
          document.getElementById('SubTotalAzul').innerHTML = document.getElementById('quantidadeAzul').innerHTML * Valor;
        }

        function adicionarRosa() {
          document.getElementById('quantidadeRosa').innerHTML = ++xRosa;
          document.getElementById('SubTotalRosa').innerHTML = document.getElementById('quantidadeRosa').innerHTML * Valor;
        }

        function adicionarVerde() {
          document.getElementById('quantidadeVerde').innerHTML = ++xVerde;
          document.getElementById('SubTotalVerde').innerHTML = document.getElementById('quantidadeVerde').innerHTML * Valor;
        }

        function adicionarTransparente() {
          document.getElementById('quantidadeTransparente').innerHTML = ++xTransparente;
          document.getElementById('SubTotalTransparente').innerHTML = document.getElementById('quantidadeTransparente').innerHTML * Valor;
        }

        function adicionarColorido() {
          document.getElementById('quantidadeColorido').innerHTML = ++xVerde;
          document.getElementById('SubTotalColorido').innerHTML = document.getElementById('quantidadeColorido').innerHTML * Valor;
        }

        function subtrairAzul() {
          document.getElementById('quantidadeAzul').innerHTML = --xAzul;
        }

        function subtrairRosa() {
          document.getElementById('quantidadeRosa').innerHTML = --xRosa;
        }

        function subtrairVerde() {
          document.getElementById('quantidadeVerde').innerHTML = --xVerde;
        }

        function subtrairTransparente() {
          document.getElementById('quantidadeTransparente').innerHTML = --xTransparente;
        }

        function subtrairColorido() {
          document.getElementById('quantidadeColorido').innerHTML = --xVerde;
        }

      </script>

      <form>
          <table style="margin: 0 auto;">
            <tr>
              <td>
                <button type="button" class="btn btn-default" onclick="subtrairAzul()">
              <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
            </button>
              </td>
              <td>
                <span id="quantidadeAzul">0</span>
              </td>
              <td>
                <button type="button" class="btn btn-default" onclick="adicionarAzul()">
              <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
            </button>
              </td>
            </tr>
          </table>
        </form>

      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <div id="SubTotalAzul"></div>
      </div>

    </div>
    <!-- SELA BROCA AZUL -->

    <!-- --------------- -->

    <!-- SELA BROCA ROSA -->
    <div class="input-group">
      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <label>Kit Sela Broca<SUP>®</SUP> Rosa</label>
      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

      <form>
        <table style="margin: 0 auto;">
          <tr>

            <td>
              <button type="button" class="btn btn-default" onclick="subtrairRosa()">
                <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

            <td>
              <span id="quantidadeRosa">0</span>
            </td>

            <td>
              <button type="button" class="btn btn-default" onclick="adicionarRosa()">
                <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

          </tr>
        </table>
      </form>

      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <div id="SubTotalRosa"></div>
      </div>
    </div>
    <!-- SELA BROCA ROSA -->

    <!-- --------------- -->

    <!-- SELA BROCA VERDE -->
    <div class="input-group">
      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <label>Kit Sela Broca<SUP>®</SUP> Verde</label>
      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

      <form>
        <table style="margin: 0 auto;">
          <tr>

            <td>
              <button type="button" class="btn btn-default" onclick="subtrairVerde()">
                <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

            <td>
              <span id="quantidadeVerde">0</span>
            </td>

            <td>
              <button type="button" class="btn btn-default" onclick="adicionarVerde()">
                <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

          </tr>
        </table>
      </form>

      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <div id="SubTotalVerde"></div>
      </div>
    </div>
    <!-- SELA BROCA VERDE -->

    <!-- --------------- -->

    <!-- SELA BROCA TRANSPARENTE -->
    <div class="input-group">
      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <label>Kit Sela Broca<SUP>®</SUP> Transparente</label>
      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

        <table style="margin: 0 auto;">
          <tr>

            <td>
              <button type="button" class="btn btn-default" onclick="subtrairTransparente()">
                <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

            <td>
              <span id="quantidadeTransparente">0</span>
            </td>

            <td>
              <button type="button" class="btn btn-default" onclick="adicionarTransparente()">
                <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

          </tr>
        </table>

      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <div id="SubTotalTransparente"></div>
      </div>
    </div>
    <!-- SELA BROCA TRANSPARENTE -->

    <!-- --------------- -->

    <!-- SELA BROCA COLORIDO -->
    <div class="input-group">
      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <label>Kit Sela Broca<SUP>®</SUP> Colorido</label>
      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

        <table style="margin: 0 auto;">
          <tr>

            <td>
              <button type="button" class="btn btn-default" onclick="subtrairColorido()">
                <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

            <td>
              <span id="quantidadeColorido">0</span>
            </td>

            <td>
              <button type="button" class="btn btn-default" onclick="adicionarColorido()">
                <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
              </button>
            </td>

          </tr>
        </table>

      </div>

      <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
        <div id="SubTotalColorido"></div>
      </div>

    </div>
    <!-- SELA BROCA COLORIDO -->

  </div>

  <div class="col-md-2"></div>

</div> <!-- ROW -->

<!-- Espaço -->
<!-- ------ -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 space">
    </div>
  </div>
</div>
<!-- ------ -->
<!-- Espaço -->

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">

    <h4 style="text-align: center;">Valor total: <span id="totalGeral" class="totalGeral"></span></h4>

  </div>
  <div class="col-md-4"></div>
</div>

Thank you!

Answer 1

The secret is to use: parseint or parseFloat

Try this code:

<div class="row">

    <div class="col-md-2"></div>

    <div class="col-md-8"
        style="border:solid 1px #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding:1%;">

        <!-- SELA BROCA AZUL -->
        <div class="input-group mx-auto text-center justify-content-center align-self-center">

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <label>Kit Sela Broca<SUP>®</SUP> Azul</label>
            </div>

            <div class="col-md-4 mx-auto justify-content-center align-self-center">

                <script type="text/javascript">

                    var xAzul = 0;
                    var xRosa = 0;
                    var xVerde = 0;
                    var xTransparente = 0;
                    var xColorido = 0;

                    var Valor = 150;

                    function adicionarAzul() {
                        let azul =  parseInt(++xAzul);
                        document.getElementById('quantidadeAzul').innerHTML = azul;
                        document.getElementById('SubTotalAzul').innerHTML = azul * Valor;
                        calcularSubTotal('+');
                    }

                    function adicionarRosa() {
                        let rosa = parseInt(++xRosa);
                        document.getElementById('quantidadeRosa').innerHTML = rosa;
                        document.getElementById('SubTotalRosa').innerHTML = rosa * Valor;
                        calcularSubTotal('+');
                    }

                    function adicionarVerde() {
                        let verde = parseInt(++xVerde);
                        document.getElementById('quantidadeVerde').innerHTML = verde;
                        document.getElementById('SubTotalVerde').innerHTML = verde * Valor;
                        calcularSubTotal('+');
                    }

                    function adicionarTransparente() {
                        let transparente = parseInt(++xTransparente);
                        document.getElementById('quantidadeTransparente').innerHTML = transparente;
                        document.getElementById('SubTotalTransparente').innerHTML = transparente * Valor;
                        calcularSubTotal('+');
                    }

                    function adicionarColorido() {
                        let colorido = parseInt(++xColorido);
                        document.getElementById('quantidadeColorido').innerHTML = colorido;
                        document.getElementById('SubTotalColorido').innerHTML = colorido * Valor;
                        calcularSubTotal('+');
                    }


                    //Subtração:

                    function subtrairAzul() {
                        let azul = parseInt(--xAzul);
                        document.getElementById('quantidadeAzul').innerHTML = azul;
                        document.getElementById('SubTotalAzul').innerHTML = parseInt(document.getElementById('SubTotalAzul').innerHTML) - Valor;
                        calcularSubTotal("-");
                    }

                    function subtrairRosa() {
                        let rosa = parseInt(--xRosa);
                        document.getElementById('quantidadeRosa').innerHTML =rosa;
                        document.getElementById('SubTotalRosa').innerHTML = rosa- Valor;
                        calcularSubTotal("-");
                    }

                    function subtrairVerde() {
                        let verde = parseInt(--xVerde);
                        document.getElementById('quantidadeVerde').innerHTML = verde;
                        document.getElementById('SubTotalVerde').innerHTML = verde - Valor;
                        calcularSubTotal("-");
                    }

                    function subtrairTransparente() {
                        let transparente = parseInt(--xTransparente);
                        document.getElementById('quantidadeTransparente').innerHTML = transparente;
                        document.getElementById('SubTotalTransparente').innerHTML = Valor - transparente;
                        calcularSubTotal("-");
                    }

                    function subtrairColorido() {
                        let colorido = parseInt(--xColorido);
                        document.getElementById('quantidadeColorido').innerHTML = colorido;
                        document.getElementById('SubTotalColorido').innerHTML = colorido - Valor;
                        calcularSubTotal("-");
                    }

                    function calcularSubTotal(tipo) {
                        let subotal = 0;

                        let azul = parseInt(document.getElementById("SubTotalAzul").innerHTML);

                        if (!isNaN(azul)) {
                            if (tipo == "+") {
                                subotal += azul;
                            }
                            else {
                                subotal -= azul;
                            }
                        }

                        let rosa = parseInt(document.getElementById("SubTotalRosa").innerHTML);
                        if (!isNaN(rosa)) {
                            if (tipo == "+") {
                                subotal += rosa;
                            }
                            else {
                                subotal -= rosa;
                            }
                        }


                        let verde = parseInt(document.getElementById("SubTotalVerde").innerHTML);

                        if (!isNaN(verde)) {
                            if (tipo == "+") {
                                subotal += verde;
                            }
                            else {
                                subotal -= verde;
                            }
                        }


                        let transparente = parseInt(document.getElementById("SubTotalTransparente").innerHTML);

                        if (!isNaN(transparente)) {
                            if (tipo == "+") {
                                subotal += transparente;
                            }
                            else {
                                subotal -= transparente;
                            }
                        }


                        let colorido = parseInt(document.getElementById("SubTotalColorido").innerHTML);

                        if (!isNaN(colorido)) {
                            if (tipo == "+") {
                                subotal += colorido;
                            }
                            else {
                                subotal -= colorido;
                            }
                        }


                        document.getElementById("totalGeral").innerHTML = "R$ " + subotal.toFixed(2);
                        return subotal;
                    }

                </script>

                <form>
                    <table style="margin: 0 auto;">
                        <tr>
                            <td>
                                <button type="button" class="btn btn-default" onclick="subtrairAzul()">
                                    <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i> -
                                </button>
                            </td>
                            <td>
                                <span id="quantidadeAzul">0</span>
                            </td>
                            <td>
                                <button type="button" class="btn btn-default" onclick="adicionarAzul()">
                                    <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i> +
                                </button>
                            </td>
                        </tr>
                    </table>
                </form>

            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <div id="SubTotalAzul"></div>
            </div>

        </div>
        <!-- SELA BROCA AZUL -->

        <!-- --------------- -->

        <!-- SELA BROCA ROSA -->
        <div class="input-group">
            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <label>Kit Sela Broca<SUP>®</SUP> Rosa</label>
            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

                <form>
                    <table style="margin: 0 auto;">
                        <tr>

                            <td>
                                <button type="button" class="btn btn-default" onclick="subtrairRosa()">
                                    <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i> -
                                </button>
                            </td>

                            <td>
                                <span id="quantidadeRosa">0</span>
                            </td>

                            <td>
                                <button type="button" class="btn btn-default" onclick="adicionarRosa()">
                                    <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i> +
                                </button>
                            </td>

                        </tr>
                    </table>
                </form>

            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <div id="SubTotalRosa"></div>
            </div>
        </div>
        <!-- SELA BROCA ROSA -->

        <!-- --------------- -->

        <!-- SELA BROCA VERDE -->
        <div class="input-group">
            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <label>Kit Sela Broca<SUP>®</SUP> Verde</label>
            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

                <form>
                    <table style="margin: 0 auto;">
                        <tr>

                            <td>
                                <button type="button" class="btn btn-default" onclick="subtrairVerde()">
                                    <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i> -
                                </button>
                            </td>

                            <td>
                                <span id="quantidadeVerde">0</span>
                            </td>

                            <td>
                                <button type="button" class="btn btn-default" onclick="adicionarVerde()">
                                    <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i> +
                                </button>
                            </td>

                        </tr>
                    </table>
                </form>

            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <div id="SubTotalVerde"></div>
            </div>
        </div>
        <!-- SELA BROCA VERDE -->

        <!-- --------------- -->

        <!-- SELA BROCA TRANSPARENTE -->
        <div class="input-group">
            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <label>Kit Sela Broca<SUP>®</SUP> Transparente</label>
            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

                <table style="margin: 0 auto;">
                    <tr>

                        <td>
                            <button type="button" class="btn btn-default" onclick="subtrairTransparente()">
                                <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i> -
                            </button>
                        </td>

                        <td>
                            <span id="quantidadeTransparente">0</span>
                        </td>

                        <td>
                            <button type="button" class="btn btn-default" onclick="adicionarTransparente()">
                                <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i> +
                            </button>
                        </td>

                    </tr>
                </table>

            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <div id="SubTotalTransparente"></div>
            </div>
        </div>
        <!-- SELA BROCA TRANSPARENTE -->

        <!-- --------------- -->

        <!-- SELA BROCA COLORIDO -->
        <div class="input-group">
            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <label>Kit Sela Broca<SUP>®</SUP> Colorido</label>
            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">

                <table style="margin: 0 auto;">
                    <tr>

                        <td>
                            <button type="button" class="btn btn-default" onclick="subtrairColorido()">
                                <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i> -
                            </button>
                        </td>

                        <td>
                            <span id="quantidadeColorido">0</span>
                        </td>

                        <td>
                            <button type="button" class="btn btn-default" onclick="adicionarColorido()">
                                <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i> +
                            </button>
                        </td>

                    </tr>
                </table>

            </div>

            <div class="col-md-4 mx-auto text-center justify-content-center align-self-center">
                <div id="SubTotalColorido"></div>
            </div>

        </div>
        <!-- SELA BROCA COLORIDO -->

    </div>

    <div class="col-md-2"></div>

</div> <!-- ROW -->

<!-- Espaço -->
<!-- ------ -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 space">
        </div>
    </div>
</div>
<!-- ------ -->
<!-- Espaço -->

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">

        <h4 style="text-align: center;">Valor total: <span id="totalGeral" class="totalGeral"></span></h4>

    </div>
    <div class="col-md-4"></div>
</div>