Hi,
anyone please help me understand flow of execution of this function (getbagButton)
getBagButtons(){
const buttons=[...document.querySelectorAll(".bag-btn")];
buttonsDOM=buttons;
buttons.forEach(button=>{
let id=button.dataset.id;
let inCart=cart.find(item=>item.id===id);
if(inCart){
button.innerText="In Cart";
buttom.disabled=true;
}
button.addEventListener("click",(event)=>{
event.target.innerText="In cart";
event.target.disabled=true;
//get product from products based on id
let cartItem={...Storage.getProduct(id),amount:1}
console.log(cartItem);
//add product to cart
//add product to cart
cart=[...cart,cartItem]
console.log("cart is",cart);
//save cart in local storage
Storage.saveCart(cart);
//set cart values
this.setCartValues(cart);
//display cart item
//show cart
});
})
}
setCartValues(cart){
let tempTotal=0;
let itemsTotal=0;
cart.map(item=>{
tempTotal += item.price * item.amount;
itemsTotal += item.amount;
})
cartTotal.innerText=parseFloat(tempTotal.toFixed(2));
cartItems.innerText=itemsTotal;
}
i know it would be difficult without knowing the rest of the code
but i hope this piece of code helps
i dont understand how forEach working in this function
as per definition foreach execute the callback function for each value of array
Inside the forEach, button is the current value for iteration of the array, and then the => arrow function callback function:
button=>{
// ...callback function body...
// ...lots of stuff in here...
// ...all the way up to here...
} //<-- end of callback function
) //<-- end of buttons.forEach() method call
...
setCartValues(cart)
I still struggle with writing arrow functions because for some reason, my silly brain is stuck on the traditional way of writing functions as like I learned once upon a time while taking a class in C at college, back in the late 1990s ).
There’s lot’s of stuff in there, including calls to other functions, etc.
All of that eventually returns something back to the forEach() which returns something back to the getBagButtons() call.
I am still a beginner in JavaScript (and programming in general), so I am not totally clear on everything. But if you trace the arguments being passed through the function, to the methods, to other methods to other functions, you can see what it is all doing. It has helpful comments in there too.
Is this your code or code from some other site or something? It seems to be code that handles the shopping cart feature for an online store site.
If you are familiar with the for loop, forEach is much the same. If, within a for loop, you did this:
function doSomethingWithTheButton(button){
/***
* get the buttons product id, check if it's
* in the cart. If so, disable the button. If
* not, add the add to cart event handler
***/
} // end of the function
const buttons = document.querySelectorAll(".bag-btn");
for(let index=0; index<buttons.length; index++){
doSomethingWithButton(buttons[index] )
}
// the above for loop is much the same as
buttons.forEach(doSomethingWithButton)
It’s simply a different style of programming, but the end result is the same. Also note in my forEach i simply pass the function name, as I’ve defined it elsewhere in my code. This is a much stronger pattern, as the name of the function can become self documenting. The forEach can now tell you, by the function name, what it’s doing.
But in this case, the forEach simply gets the buttons data-id attribute, checks is it’s in the cart, and responds in one of two possibly ways.
so when forEach executes-----
1st iteration-
1-id=button.dataset.id// id=firstbutton dataset value which is 1
2-inCart=cart.find(item=>item.id===id); //right now cart is empty so inCart has no value.
3-if(inCart){
button.innerText=“In Cart”;
buttom.disabled=true;
}//this will also not execute because incart has no value
4- button .addevent listener start for click event
Question1: my question is will forEach attach event listener for each button while its execution and then stops iterating?
Question2: what happen when i click on a button will code goes to code where if condition
"if(inCart){
button.innerText=“In Cart”;
buttom.disabled=true;
}
"
exist
if yes then how because foreach execute and attached event listener with each button already then why would it repeat itself to me only event listener part executes if yes then how would it check inCart value.
IAM Totally confused please explain. thanks in advance
You have posted a portion of code, but it is really just the function definition for getBagButtons. I think that some other code outside of what you have posted that is not shown here must call the getBagButtons function.
When getBagButtons() is called again with new arguments, such as an item was added to the cart by clicking the button for the item, getBackButtons() is called again with different arguments and therefore all its code runs again. .
Yes because forEach is like a loop. It does the operation FOR EACH item in the buttons array. Then at the end it returns the result.
Not sure about your other questions, I will have to think about them for a little while.
well without seeing the code that calls it, it’s hard to know what are the conditions outside of the function that have changed before it is called again.
).