Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

ilovecode
ilovecode
8,071 Points
Posted by ilovecode
ilovecode
8,071 Points

Issue with incrementing and decrementing and subtraction from total

I have a piece of code where I calculate the total price of products added are displayed in the total, and then I want to increment and decrement product quantities and update the total accordingly. I also have a remove link that must remove the product entirely and also update the total.

My issue is that when I increment the product, all the products quantities increment and total goes to 0, and when I click on one remove button then all the products remove, and the total does not get updated.

I have created a code pen to make it easier to see what I mean: https://codepen.io/dobby_is_free/pen/BajpwGb?editors=1111

Please help, I have been on this for days, trying so many different things and I did get different results at one point or another but decided to just create this code pen.

1 Answer

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

The "price" variable holds an HTMLCollection of "span" elements, but the function to recalculate is called this way:

            calculate(price * x);

Attempting to multiply a collection by a scalar value produces "NaN" (not a number), so the rest of the code will be unable to retrieve the price values thus returning a 0 total. You will need to modify the strategy anyway to account for each item having its own quantity.

Then the handler for a "remove" uses a "forEach" to remove every item. Instead, you could use DOM traversal to identify the associated "cart-detail" element and remove just that one:

        removeProd[i].addEventListener('click', e => {       // use the passed event object
            //productToRemove.forEach(rem => rem.remove());  <- don't remove all
            e.target.closest('.cart-detail').remove();       // just remove this one

And while not a techincal issue, I found it awkward to click on an item where the cursor was an I-beam. This line of CSS would change the cursor to visually imply that the item can be clicked:

.remove-product {
  color: red;
  cursor: pointer;    /* make it look "clickable" */
}
ilovecode
ilovecode
8,071 Points
ilovecode
ilovecode
8,071 Points

Thanks, the remove change worked. However, my biggest problem with this whole piece is calculating the total. I have been on this for 4 days, and tried many things, so I guess in my code pen I just gave a very short version, because I did not want to copy and paste everything I tried. At one point when I was doing the incrementing, it worked fine by adding the amounts of the product being incremented, but then when I start incrementing another product then the total will adjust to only show the total of the product being incremented. I tried different things, and started realising I am going in circles. At one point when I only used calculate(price) under increment it worked, and I had no idea why. This total things is really killing me, I don't understand how it can be so difficult, I have Googled and in my head I know how it should be calculated.

The total issues I have are: incrementing and decrementing, and when removing the product. In my "official" code for my project I am able to calculate the total of projects I add dynamically and incrementing worked, until I realised it changes the total when I increment two or more products.

I will update the code pen to have the pointer for the mouse for the remove link. I just set it up to give an idea of what I am doing. Thanks for your help.

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

If you still need help, please show the unabbreviated whole code. Codepen is pretty good, but another option to share code here that might be better is with the Treehouse Workspaces, particularly if you have multiple modules and/or images or other associated components.

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

You can't share a direct URL to your workspace, it's temporary and only exists while you are using it.
But you can use the snapshot function in the workspace and provide the link to that.

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

In custom.js on line 196 the increment handler calls "calculate" and puts the result in the private variable "res". But then nothing is done with "res", and the "calculate" function only logs and returns the total.

Perhaps you meant to call "total" instead which would update the total value shown in the "trunk".

ilovecode
ilovecode
8,071 Points
ilovecode
ilovecode
8,071 Points

Sorry Steven, here is an updated https://w.trhou.se/6vq9xuy0zd.

I should have checked my code, I uncommented a lot for debugging purposes and did not check before putting it on the snapshot. I added the code again that I left out, and I also tried again to see if I can get to win this thing.

It seems that the incrementing function is working, but the subtracting from the total with decrementing and when removing the product remains a problem. I can remove the product, but it won't update the total. I tried different methods with the subtracting, including filter, reduce, etc

Steven Parker
Steven Parker
231,141 Points
Steven Parker
Steven Parker
231,141 Points

The "total" method pushes a new price onto the "prices" list and then adds up all the prices and displays them. So it would make sense for the "subtractTotal" function to remove the price from the list and then add and display them. So only the adding or removing would be different, the summing and displaying would be the same (and could be implemented as a shared function).

But that's not what it does currently. The first line pushes the price onto the list, then the next line calls "total", which will push it on again. So instead of removing the price, it adds it two times. Then the rest of that function subtracts the prices from the total to produce 0. The event handler that called it then reduces the 0 total by the item price leaving the negative of one unit.

I also noticed some code redundancies that could be cleaned up. For example, "total" displays the result on the page, but after the handler calls "total", it displays it again.

Maintaining the same data in multiple places (like keeping the list of prices separately from the cart inventory) can lead to redundancies and errors. A rework (or maybe just the next similar project) might get totals directly from the inventory.

If your original question has been resolved, you can mark the question solved by choosing a "best answer". Any further issues should probably go into a fresh question.