How to update dynamic price based on quantity using vanilla JavaScript?-CodePudding

I'm trying to update the price value based on the quantity count using javascript. I have hardcoded it and below is my code. I'm not sure how to update the price dynamically based on the quantity count. Can anyone please guide me?

For example when 77.89 X the count value is increased to 2 the actual result should be 155.78,

var count = 1;
var countprice = 100;
var countEl = document.getElementById("num-count");
const a = 2;
const x = countprice * a;
document.getElementById("priceValueCount").innerHTML = x;

function addCount() {
  if (count < 4) {
    count  ;
    countEl.value = count;
  }
}

function minusCount() {
  if (count > 1) {
    count--;
    countEl.value = count;
  }
}

.num-minus,
.num-add {
  margin-top: 1px;
  display: inline-block;
  position: relative;
}

.num-minus:before,
.num-add:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  border-top: 2px solid #3A3E3D;
  margin-top: -1px;
}

.num-add::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  height: 10px;
  border-left: 2px solid #3A3E3D;
  margin-left: -1px;
}

<div class="price-value" id="priceExtra">$77.89</div>

<span class="num-minus" onclick="minusCount()"></span>
<input type="text" class="num-count" id="num-count" value="1" data-max="4" data-min="1">
<span class="num-add" onclick="addCount()"></span>


<div class="price-value" id="priceValueCount"></div>

CodePudding user response：

1) You can use input of type number

<input type="number" max="4" min="0" step="1" class="num-count" id="num-count" value="1">

2) You can use change event you can update the price as

const total = countprice * e.target.value   priceExtra; // If you want to add extra price here else remove the priceExtra
document.getElementById( "priceValueCount" ).textContent = total;

var count = 1;
var countprice = 100;
var countEl = document.getElementById( "num-count" );
const priceExtra = 77.89;
const input = document.querySelector( "#num-count" );

input.addEventListener( "change", e => {
    const total = countprice * e.target.value   priceExtra;
    document.getElementById( "priceValueCount" ).textContent = total;
} )

<div class="price-value" id="priceExtra">$77.89</div>

    <input type="number" max="4" min="0" step="1" class="num-count" id="num-count" value="1" data-max="4" data-min="1">


    <div class="price-value" id="priceValueCount"></div>

CodePudding user response：

var count = 1;
var countprice = 77.89;
var countEl = document.getElementById("num-count");
var priceEl = document.getElementById("priceValueCount");
priceEl.innerHTML = countprice;

function addCount() {
  if (count < 4) {
    count  ;
    countEl.value = count;
    const a = countEl.value;
    const x = countprice * a;
    priceEl.innerHTML = x;
  }
}

function minusCount() {
  if (count > 1) {
    count--;
    countEl.value = count;
    const a = countEl.value;
    const x = countprice * a;
    document.getElementById("priceValueCount").innerHTML = x;
  }
}

.num-add, .num-minus {
  cursor: pointer;
}

<div class="price-value" id="priceExtra">$77.89</div>

<span class="num-minus" onclick="minusCount()">-</span>
<input type="text" class="num-count" id="num-count" value="1" data-max="4" data-min="1">
<span class="num-add" onclick="addCount()"> </span>


<div class="price-value" id="priceValueCount">0</div>