Estoy tratando de actualizar el valor del precio en función del recuento de cantidades usando javascript. Lo he codificado y debajo está mi código. No estoy seguro de cómo actualizar el precio dinámicamente según el recuento de cantidad. ¿Puede alguien por favor guiarme?
Por ejemplo, cuando 77,89 X el valor de conteo se incrementa a 2, el resultado real debería ser 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) Puede usar input del number de tipo
<input type="number" max="4" min="0" step="1" class="num-count" id="num-count" value="1"> 2) Puede usar el evento de change , puede actualizar el precio como
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>