Just started to learn javascript. I have a simple school project. I have 3 items with - and + buttons with total for each and then final total for all 3. I can't get the total button to not go below 0. It goes to negative values. The other 3 don't drop below 0 in their individual total count.
//set default values
let gb = 0 // Gingerbread
let cc = 0 // Chocolate Chip
let ss = 0 // Sugar Sprinkle
let total = 0
//set variables for quantity
var totalQuantity = document.getElementById('qty-total');
var gbQuantity = document.getElementById('qty-gb');
var ccQuantity = document.getElementById('qty-cc');
var ssQuantity = document.getElementById('qty-sugar');
//set event listener for Gingerbread cookie + button
document.getElementById("add-gb").addEventListener("click", function(e) {
{
gb++
}
gbQuantity.textContent = gb;
total = total + 1;
totalQuantity.textContent = total;
console.log("Gingerbread + was clicked!")
})
// set even listener for Gingerbread cookie - button
document.getElementById("minus-gb").addEventListener("click", function(e) {
if(gb > 0)
{
gb--
}
gbQuantity.textContent = gb;
total = total - 1;
totalQuantity.textContent = total;
console.log("Gingerbread - was clicked!")
})
//set event listener for Chocolate chip cookie + button
document.getElementById("add-cc").addEventListener("click", function(e) {
{
cc++
}
ccQuantity.textContent = cc;
total = total + 1;
totalQuantity.textContent = total;
console.log("Chocolate Chip + was clicked!")
})
//set event listener for Chocolate chip cookie - button
document.getElementById("minus-cc").addEventListener("click", function(e)
{
if(cc > 0)
{
cc--
}
ccQuantity.textContent = cc;
total = total - 1;
totalQuantity.textContent = total;
console.log("Chocolate Chip - was clicked!")
})
//set event listener for Sugar Sprinkle cookies + button
document.getElementById("add-sugar").addEventListener("click", function(e) {
{
ss++
}
ssQuantity.textContent = ss;
totalQuantity = document.getElementById("qty-total");
total = total + 1;
totalQuantity.textContent = total;
console.log("Sugar Sprinkle + was clicked!")
})
//set event listener for Sugar Sprinkle cookies - button
document.getElementById("minus-sugar").addEventListener("click", function(e) {
if ( ss > 0)
{
ss--
}
ssQuantity.textContent = ss;
total = total - 1;
totalQuantity.textContent = total;
console.log("Sugar Sprinkle - was clicked!")
})
So the total quantity keeps dropping below 0 after the minus buttons are still clicked. Thank you for any assistance.
Without seeing all your code, one way to achieve this would be to wrap a condition around all parts of your code total = total - 1; which decrement total....
if(total >= 1){
total = total - 1;
}
So now, total will only decrease if it is currently a value greater than or equal to 1.
I think you need to initialize the total variable with this at start of code. This will ensure that total starts with the correct sum.
total = totalQuantity.textContent
And it should be ensured that the qty-total in UI should be set to qty-gb + qty-cc + qty-sugar
Alternatively, you could also do this at the start:
total = gbQuantity + ccQuantity + ssQuantity
There's at least two simple fixes to consider:
cc--, gc-- and ss--, but also make sure that the logic that substracts from the total (i.e., these lines - total = total - 1) are also inside the same if-condition.
Otherwise currently you're substracting from the total, no matter if you substracted from the gc, ss or ccOR
total = total + 1 or total = total - 1, you could always just say that total = gc + cc + ss, for example. :)