Question

以下代码中存在问题。因此，基本上我想要的是每次我按加号或减号按钮时，总价格应该增加和减少。问题是当我console.log sum变量在控制台中工作正常时，但是当我在标记中添加sum变量时，它开始将总数乘以输入数字。 this is when I console logged it和this is when it's on the tag

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中先前计算出的值用作后续计算的数量乘数（这就是为什么无论递增还是递减都得到指数增长效果的原因）。您需要将基准价格存储在某个地方，然后将其用于计算（而不是尝试将最新的总数纳入计算中）。

以下是一个示例，在您的data-price元素中使用附加的.product-total-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>

递增或递减数量时如何获得总价？

3 个答案: