How to use counter inside the class function?

JavaScript
1

There is a function in my classroom that should increase once the button is pressed. Before doing this, I tried doing this with the closure function and again failed. Why does this function not work?

productQuantity(e) {
        let inCart = Storage.getCartFromStorage()
        let target = e.target.classList

        if (target.contains('fa-chevron-up')) {
            let findPlus = inCart.find(item => item.id === e.target.dataset.id)
            e.target.nextElementSibling.innerText;
        }
    }

In a video I watched on the freecodecamp youtube channel before, a function like this was written and working. it’s code;

else if (event.target.classList.contains('fa-chevron-up')) {
                let addAmount = event.target
                let id = addAmount.dataset.id
                let tempItem = this.cart.find(item => item.id === id)
                tempItem.amount = tempItem.amount + 1
                addAmount.nextElementSibling.innerText = tempItem.amount
            }
2

First of all, this:

let target = e.target.classList

is confusing. I think:

let classList = e.target.classList

would be clearer.

Are you logging out the values to make sure they are what you think they are?

Is there a repo or a pen or whatever for this?

3

I do not understand exactly what you mean.

4

And to be honest, I don’t exactly understand what you are trying to do in your function. In the if statement you initialize the variable findPlus and then you don’t do anything with it. Also, the statement:

e.target.nextElementSibling.innerText;

does nothing. You have to set innerText to a value.

It might help us help you if you put your code somewhere we can see it so we have more context as to what you are trying to do.

5

From the second block of code, you can understand what I want to do, to show you exactly.

if (target.contains('fa-chevron-up')) {
            let findPlus = inCart.find(item => item.id === e.target.dataset.id)
            findPlus.amount = findPlus.amount  + 1
            e.target.nextElementSibling.innerText = findPlus.amount
        }

That way, I want the particular item to increment with each click. But for this I should not create a variable in the global, each element has an amount in the local repository, I try to increase it specifically.

6

OK, this revised if statement looks a little more promising, but we still have no idea if it is correct for your application because we lack the context that this function is running in. In other words, the code may be syntactically correct but we don’t know if it is actually “correct” because we don’t know if the values in the function are being used correctly. It could be as simple as a typo in the ‘fa-chevron-up’ class. Or maybe you meant e.target.id instead of e.target.dataset.id. I’m just guessing here. We can’t really help you debug this function until we can actually run this function for ourselves in the code.

As @kevinSmith suggested, start adding console.logs to make sure that all of the values in this function are what you expected them to be. I’d start with the event you are passing into the function. Are you sure the target for the event is what you are expecting?

7

Is inCart an array of objects? Do the objects have an amount property on them?

If so you should update the data first (and save it to localStorage if that is where you save it) and then use the updated data for the DOM. Otherwise, you will lose the amount increase on refresh.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.