CODEWITHSUNDEEP
javascriptdynamiccountreturn-value
Script Host
Script Host

Reputation: 922

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

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>

Upvotes: 1

Views: 503

Answers (2)

imh1j4l
imh1j4l

Reputation: 95

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>

Upvotes: 1

DecPK
DecPK

Reputation: 25398

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>

Upvotes: 0

Related Questions