数量更改时更新总变量

Question

更改“完成电子书”产品数量时，更新总数时遇到问题。当我第一次设定数量并将其添加到购物篮时，它会在购物篮内显示正确的总数，但是当我更改数量时，它会增加到之前的总数。总体而言，我希望能够将多个产品添加到篮子总数（原因为x += p2Total（x var是总数 - 第86行），但同时允许更改产品的数量，然后更新总数。

Codepen Here > 有问题的产品是前2

JS：

// JQuery Functions for NavBar - Class Toggle 

(function() { 
    $('.hamburger-menu').on('click', function() { 
    $('.bar').toggleClass('animate'); 
    }) 
})(); 

(function() { 
    $('.hamburger-menu').on('click', function() { 
    $('.bar2').toggleClass('ApprDown'); 
    }) 
})(); 

/* 

START OF BASKET 
START OF BASKET 


*/ 

// Get access to add to basket basket button 
var addToBasket = document.querySelector('.atbb'); 
addToBasket.addEventListener('click', P1); 

// Formatter simply formats the output into a currceny format istead of a general number format. This is using the ECMAScript Internationalization API 

var formatter = new Intl.NumberFormat('en-US', { 
    style: 'currency', 
    currency: 'GBP', 
    minimumFractionDigits: 2, 
}); 

var totalBasket 
var discountLimit = 10 
var discount = 3.50 
var x = 0.00 
// One big function with different condtions based on the differnt products and then simply concatinate the values where needed 
function P1() { 
    var y = document.getElementById("p1Quant").value; 
    if (+y > discountLimit) { 

    var z = 15.000 
    x = parseFloat(+y) * parseFloat(+z); // + will convert the vars into Numbers etc 
    document.getElementById("BasketSumData").innerHTML = ("Sub Total: ") + formatter.format(x) + ("<br/>") + ("<hr />") + ("<div class='strike'>Plus £3.50 Delivery</div>") + ("<br/>") + ("<hr />") + ("Total: ") + formatter.format(x) 

//  Jquery Notificaiton 

var truckVar = document.getElementById("truck"); 
    truckVar.setAttribute("class", "animateTruck"); 




    } else if (+y <= 0) { 

    document.getElementById("BasketSumData").innerHTML = ("Sub Total: ") + formatter.format(0) + ("<br/>") + ("Total: ") + formatter.format(0) 

    } else { 

    var z = 15.000 
    var s = 15.000 
    x = parseFloat(+y) * parseFloat(+z) + 3.50 
    var sub = parseFloat(+y) * parseFloat(+s) 
    document.getElementById("BasketSumData").innerHTML = ("Sub Total: ") + formatter.format(sub) + ("<br/>") + ("<hr />") + ("Plus £3.50 Delivery") + ("<br/>") + ("<hr />") + ("Total: ") + formatter.format(x) 

    } 
} 



var addToBasket2 = document.querySelector('.atbb2'); 
addToBasket2.addEventListener('click', P2); 

function P2() { 

    p2Total = 0.00 
    var y = document.getElementById("p2Quant").value; 


    var p2 = 8.00 
    var p2Total = parseFloat(+y) * parseFloat(+p2); // + will convert the vars into Numbers etc 
    // var totalBasket = + x + x // javascript add value onto set var 

    x += p2Total // Append the amount to the basket 

    document.getElementById("BasketSumData").innerHTML = ("Sub Total: ") + formatter.format(x) + ("<br/>") + ("<hr />") + ("<div class='strike'>Plus £3.50 Delivery</div>") + ("<br/>") + ("<hr />") + ("Total: ") + formatter.format(x) 


    if (+y <= 0) { 

    p2Total = 0.00 

    } 
} 

Answer 1

不要添加值对x，加X和p2Total成的作用域函数本身一个新的临时值并使用它。

var tmp_total = x + p2Total; 
document.getElementById("BasketSumData").innerHTML = ("Sub Total: ") + formatter.format(tmp_total) + ("<br/>") + ("<hr />") + ("<div class='strike'>Plus £3.50 Delivery</div>") + ("<br/>") + ("<hr />") + ("Total: ") + formatter.format(tmp_total)