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>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>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>