Calculate total price of multiple incremented quantity fields with different price of each-CodePudding

I want to calculate total price of multiple input fields on keyup function. Each has a different price and the input value is the quantity.

I made a buttons which count the total based on if the user clicks up or down. It all works fine, but how can I make an onkeyup event to show live total price so that all functions work together and total price can also be changed manually?

$(document).on("click", ".clickup", function() {
  var price = $(this).data('price');
  var id = $(this).data('id');
  var group = $(this).data('group');
  var count = 'plus';
  var el = document.getElementById('qty'   id);
  el.value = Number(el.value)   1;
  calculateTotal(price, count);
});

$(document).on("click", ".clickdown", function() {
  var price = $(this).data('price');
  var id = $(this).data('id');
  var count = 'minus';
  var el = document.getElementById('qty'   id);
  if (el.value == 0) return false;
  el.value = Number(el.value) - 1;
  calculateTotal(price, count);
});

function calculateTotal(price, count) {
  var totalnow = $('#total').data('total');
  if (count == 'plus') {
    var total = parseInt(totalnow)   parseInt(price);
  }
  if (count == 'minus') {
    var total = parseInt(totalnow) - parseInt(price);
  }
  $('#total').data('total', total);
  $('#total').html(total   "€");
};

.content {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: #1a1d21;
  position: absolute;
  width: 100vw;
  height: 100vh;
}

flex {
  display: flex;
}

.qty-count {
  min-width: 100%;
  max-width: 100%;
  min-height: 40px;
  max-height: 40px;
  border-radius: 1rem;
  line-height: 15px;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.8rem;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}

.qty-check {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  position: relative;
  min-height: 100px;
}

.qty-check:hover {
  background: rgba(255, 255, 255, 0.1);
}

.qty-label {
  justify-content: flex-start !important;
  align-items: flex-start;
  padding: 0.5rem;
  padding-left: 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  border-radius: 1rem;
  font-size: 1.8rem;
  cursor: pointer;
  width: 100%;
  border: 0;
}

.pick-attr-label {
  padding-right: 40px;
  color: #fff;
  font-weight: 500;
}

.qty-check .checkbox-input:checked .checkbox-label .qty-count {
  background: #fff !important;
  color: #141414 !important;
}

.qty-counter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  border-radius: 1rem;
}

.qty-counter.active {
  display: block;
  background: rgba(255, 255, 255, 0.1)
}

.total {
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: #fff;
}

.attribute-unit {
  position: absolute;
  display: none;
}

.counter-buttons {
  position: relative;
  padding: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
  max-width: 100px;
}

.counter-buttons.active {
  display: flex;
}

.counter-buttons a {
  min-width: 30px;
  max-width: 30px;
  min-height: 30px;
  max-height: 30px;
  font-size: 1.8rem;
  line-height: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
  text-align: center;
  margin-left: 0.5rem;
  color: #fff;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.counter-buttons a:hover {
  background: rgba(255, 255, 255, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

  <div >
    <label  data-price="5" data-id="1"><span >Item 1 5.00€</span></label>
    <div >
      <input type="text" value="" id="qty1"  data-price="5.00" data-id="1">
      <flex>
        <a  data-id="1" data-price="5.00">-</a>
        <a data-price="5.00" data-id="1" > </a></flex>
    </div>
  </div>

  <div >
    <label  data-price="5" data-id="2"><span >Item 2 10.00€</span></label>
    <div >
      <input type="text" value="" id="qty2"  data-price="10.00" data-id="2">
      <flex>
        <a  data-id="2" data-price="10.00">-</a>
        <a data-price="10.00" data-id="2" > </a></flex>
    </div>
  </div>

  <h2 data-total="0" >Total<span id="total" data-total="0"></span></h2>

</div>

https://jsfiddle.net/3hLwgbjq/

CodePudding user response：

I modified your code, by calculating the total on every action, the calculateTotal function is now without parameters.

Please check this fiddle:

https://jsfiddle.net/jbzfp4sw/

I loop through every <div > element, get the current price and quantity and recalculate the total.

$(document).on("click", ".clickup", function () {
    var price = $(this).data('price');
    var id = $(this).data('id');
    var group = $(this).data('group');
    var count = 'plus';
    var el = document.getElementById('qty'   id);
    el.value = Number(el.value)   1;
    calculateTotal();
  });

$(document).on("click", ".clickdown", function () {
    var price = $(this).data('price');
    var id = $(this).data('id');
    var count = 'minus';
    var el = document.getElementById('qty'   id);
    if(el.value == 0) return false;
    el.value = Number(el.value) - 1;
    calculateTotal();
  });
  
  $(".qty-count").on("keyup", function() {
    calculateTotal();
  })
  
function calculateTotal() {
    var total = 0
    
    $(".qty-check").each(function(index) {
       var price = $(this).find(".qty-count").data("price");
       var qty = $(this).find(".qty-count").val();
       total  = price * qty;
    });
    
    $('#total').data('total', total);
    $('#total').html(total   "€");
};

.content{
  display:flex;
  flex-flow:column;
  justify-content:center;
  align-items:center;
  background:#1a1d21;
  position:absolute;
  width:100vw;
  height:100vh;
}
flex{
  display:flex;
}
.qty-count{
    min-width: 100%;
    max-width: 100%;
    min-height: 40px;
    max-height: 40px;
    border-radius: 1rem;
    line-height: 15px;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.8rem;
    padding:0 !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff;
}
.qty-check{
    display: flex;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    min-height: 100px;
}
.qty-check:hover{
    background: rgba(255,255,255,0.1);
}
.qty-label{
    justify-content: flex-start !important;
    align-items: flex-start;
    padding: 0.5rem;
    padding-left: 0.5rem !important;
    border:1px solid rgba(255,255,255,0.2);
    overflow: hidden;
    border-radius: 1rem;
    font-size: 1.8rem;
    cursor: pointer;
    width: 100%;
    border: 0;
}
.pick-attr-label{
    padding-right: 40px;
    color:#fff;
    font-weight: 500;
}
.qty-check .checkbox-input:checked   .checkbox-label .qty-count {
    background: #fff !important;
    color: #141414 !important;
}
.qty-counter{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    border-radius: 1rem;
}
.qty-counter.active{
    display: block;
    background: rgba(255,255,255,0.1)
}
.total{
  display:flex;
  width:100%;
  justify-content:space-around;
  color:#fff;
}
.attribute-unit{
    position: absolute;
    display: none;
}
.counter-buttons{
    position: relative;
    padding: 1rem;
    z-index: 4;
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
    max-width: 100px;
}
.counter-buttons.active{
    display: flex;
}
.counter-buttons a{
    min-width: 30px;
  max-width:30px;
    min-height: 30px;
  max-height:30px;
    font-size: 1.8rem;
    line-height: 30px;
    border:1px solid #fff;
    border-radius: 50%;
    text-align: center;
    margin-left: 0.5rem;
    color: #fff;
      -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.counter-buttons a:hover{
    background: rgba(255,255,255,0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

<div >
<label  data-price="5" data-id="1"><span >Item 1 5.00€</span></label>
<div >
<input type="text" value="" id="qty1"  data-price="5.00" data-id="1"><flex>
<a  data-id="1" data-price="5.00">-</a>
<a data-price="5.00" data-id="1" > </a></flex></div>
</div>

<div >
<label  data-price="5" data-id="2"><span >Item 2 10.00€</span></label>
<div >
<input type="text" value="" id="qty2"  data-price="10.00" data-id="2"><flex>
<a  data-id="2" data-price="10.00">-</a>
<a data-price="10.00" data-id="2" > </a></flex></div>
</div>

 <h2 data-total="0" >Total<span id="total" data-total="0"></span></h2>
 
</div>