遞增或遞減數量時如何獲得總價？

Question

我在下面的代碼中有一個問題。 因此，基本上我想要的是每次我按加號或減號按鈕時，總價格應該增加和減少。 問題是當我console.log sum變量在控制台中工作正常時，但是當我在標記中添加sum變量時，它開始將總數乘以輸入數字。 這是我在控制台上記錄它的時間 ， 這是它在標簽上的時間

 var increament = document.querySelector('#myform .qtyplus'); var decreament = document.querySelector('#myform .qtyminus'); increament.addEventListener('click', incrementValue); decreament.addEventListener('click', decrementValue); function incrementValue() { var value = parseInt(document.getElementById('input-number').value); if (isNaN(value) || value < 1) { value = 1; } value++; document.getElementById('input-number').value = value; productpagetotal() } function decrementValue() { var value = parseInt(document.getElementById('input-number').value); if (isNaN(value) || value < 1) { value = 1; } value--; document.getElementById('input-number').value = value; productpagetotal() } function productpagetotal() { var sum = 0; var producttotal = parseFloat(document.querySelector('.span').innerText.replace('$', '')); var quantity = document.getElementById('input-number').value; sum = sum + (producttotal * quantity); sum = Math.round(sum * 100) / 100; producttotal.innerText = sum; console.log(sum) } 

 <div class="quant"> <p>Qty</p> <form id='myform' method='POST' action='#'> <input type='button' value='-' class='qtyminus' field='quantity' /> <input type='text' id="input-number" name='quantity' value='1' class='qty' /> <input type='button' value='+' class='qtyplus' field='quantity' /> </form> </div> <div id="last-list"> <h6 style="font-size: 17px">Free Shipping on Order over $80</h6> <h4 class="in-h4">Delivery to pincode 000001 - within 2-4 business days</h4> <div class="total-price"> <span>Total Price</span> <span class="span product-total-price">$24.99</span> <button class="add-to-card">ADD TO CART</button> </div> </div> 

Answer 1

但是，當我添加sum變量時，它開始將總數乘以輸入數字

您的代碼在productpagetotal函數中的以下行中：

sum = sum + (producttotal * quantity);

這會產生您遇到的奇怪行為。 更改此行應該可以解決您的問題。

Answer 2

我注意到，當只有一個硬編碼時，您的代碼沒有產品總數。

var pt = 29.99
var increament = document.querySelector('#myform .qtyplus');
var decreament = document.querySelector('#myform .qtyminus');
       increament.addEventListener('click', incrementValue);
       decreament.addEventListener('click', decrementValue);

function incrementValue(){ 
    var value = parseInt(document.getElementById('input-number').value);
    if (isNaN(value) || value < 1) {
        value = 1;  
    }
    value++;
    document.getElementById('input-number').value = value;
    productpagetotal()
}


function decrementValue(){
    var value = parseInt(document.getElementById('input-number').value);
    if (isNaN(value) || value < 1) {
        value = 1;  
    }
    value--;
    document.getElementById('input-number').value = value;
    productpagetotal()
}


function productpagetotal(){
    var producttotal = document.getElementById('product-total');

    var quantity = document.getElementById('input-number').value;
     var sum = (pt * quantity);
     sum = Math.round(sum * 100) / 100;
     producttotal.textContent = sum;
     console.log(sum)
}

<div class="quant">
  <p>Qty</p>
  <form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' id="input-number" name='quantity' value='1' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
  </form>
</div>

<div id="last-list">
  <h6 style="font-size: 17px">Free Shipping on Order over $80</h6>
  <h4 class="in-h4">Delivery to pincode 000001 - within 2-4 business days</h4>
  <div class="total-price">
    <span>Total Price</span>
    <span class="span product-total-price" id="product-total">$24.99</span>
    <button class="add-to-card">ADD TO CART</button>
  </div>
</div>

Answer 3

您使productpagetotal()函數有些復雜。 問題在於，您正在將.product-total-price span先前計算的值用作后續計算的數量乘數（這就是為什么無論遞增還是遞減都得到指數增長效果的原因）。 您需要將基准價格存儲在某個地方，然后將其用於計算（而不是嘗試將最新的總數納入計算中）。

以下是在.product-total-price元素中使用附加data-price屬性以存儲基本價格以及簡化的productpagetotal()函數的示例（但還有許多其他方法可以存儲基本價格）：

 var increment = document.querySelector('#myform .qtyplus'); var decrement = document.querySelector('#myform .qtyminus'); increment.addEventListener('click', incrementValue); decrement.addEventListener('click', decrementValue); function incrementValue() { var value = parseInt(document.getElementById('input-number').value); if (isNaN(value) || value < 1) { value = 1; } value++; document.getElementById('input-number').value = value; productpagetotal() } function decrementValue() { var value = parseInt(document.getElementById('input-number').value); if (isNaN(value) || value < 1) { value = 1; } value--; document.getElementById('input-number').value = value; productpagetotal() } function productpagetotal() { var totalPrice = document.querySelector('.product-total-price'); var price = totalPrice.dataset.price; var quantity = document.getElementById('input-number').value; var sum = price * quantity; sum = Math.round(sum * 100) / 100; totalPrice.innerHTML = '$' + sum; } 

 <div class="quant"> <p>Qty</p> <form id='myform' method='POST' action='#'> <input type='button' value='-' class='qtyminus' field='quantity' /> <input type='text' id="input-number" name='quantity' value='1' class='qty' /> <input type='button' value='+' class='qtyplus' field='quantity' /> </form> </div> <div id="last-list"> <h6 style="font-size: 17px">Free Shipping on Order over $80</h6> <h4 class="in-h4">Delivery to pincode 000001 - within 2-4 business days</h4> <div class="total-price"> <span>Total Price</span> <span class="span product-total-price" data-price="24.99">$24.99</span> <button class="add-to-card">ADD TO CART</button> </div> </div>