function don't exit with return javascript

Question

I want that function to stop executing if the "if" conditon (product_name === x.innerHTML) is met . So I put return statement at the end of that condition. But that function keep executing even if it met that return statement.Why? I just a beginner. Thanks for you kind help.

addtoCart.addEventListener('click', (e) => {

  quantity_on_cart = parseInt(cartItems.innerText);
  let quantity = parseInt(i.innerHTML)

  if (quantity === 0) {
    cartItems.innerText = quantity_on_cart + quantity;
  } else {
    cartItems.innerText = quantity_on_cart + quantity;
    let div = document.createElement("div");
    let product_nameIn_cart = document.getElementsByClassName("product_nameIn_cart");
    [...product_nameIn_cart].forEach((x) => {


      if (product_name === x.innerHTML) {

        x.parentNode.parentNode.querySelector(".quan").value =
          parseInt(x.parentNode.parentNode.querySelector(".quan").value) + parseInt(i.innerText);
        x.parentNode.parentNode.querySelector(".total").innerHTML =
          parseInt(x.parentNode.parentNode.querySelector(".quan").value) * parseInt(product_price);
        calTotal();
        return;

      }
    })

    console.log("Hello World");
    div.classList.add("d-flex", "justify-content-around", "my-3", "displayDel");
    div.innerHTML = `            
                                <div>
                               <div class="product_nameIn_cart">${product_name}</div>
                                <div class="delcontainer">
                                <button class=" btn btn-sm btn-danger" 
     onclick="cancel(this)">Cancel</button>
                                </div>                               
                                </div> 

                                <div>${ parseInt(product_price)}</div>

                                <div>                        
                                <input class="quan" type="number" min="0" 
     value="${parseInt(i.innerText)}" onclick="quan(this)"/>
                                </div>

                                <div 
    class="total">${parseInt(product_price)*parseInt(i.innerText)}</div>
                            `;
    order_submit.append(div);

    calTotal();
  }
})

Your return is at the end anyway, there is nothing after it in the function you pass to forEach — Lk77, Sep 07 '22 at 08:47
Does this answer your question? [What does \`return\` keyword mean inside \`forEach\` function?](https://stackoverflow.com/questions/34653612/what-does-return-keyword-mean-inside-foreach-function) — Ivar, Sep 07 '22 at 08:47
Expanding on Ivar's recommended thread from the Mozilla docs: There is no way to stop or break a `forEach()` loop other than by throwing an exception. If you need such behavior, the `forEach()` method is the wrong tool. Early termination may be accomplished with: A simple for loop A for...of / for...in loops `Array.prototype.every()` `Array.prototype.some()` `Array.prototype.find()` `Array.prototype.findIndex()` — Joe Moore, Sep 07 '22 at 08:50

score 0 · Answer 1 · answered Sep 07 '22 at 08:53

Your return statement only returns in the function provided to forEach(). It will keep iterating the remaining items. If you want to break out early you can either use a breakable loop, e.g for-loop:

for (const x of product_nameIn_cart) {
  if(product_name === x.innerHTML){
    x.parentNode.parentNode.querySelector(".quan").value = parseInt(x.parentNode.parentNode.querySelector(".quan").value) + parseInt(i.innerText);
    x.parentNode.parentNode.querySelector(".total").innerHTML = parseInt(x.parentNode.parentNode.querySelector(".quan").value) * parseInt(product_price);
    calTotal();
    return;
  }
}

Or stop processing in the forEach() by using a variable:

let finished = false
product_nameIn_cart.forEach((x) => {
  if(!finished && product_name === x.innerHTML){
    x.parentNode.parentNode.querySelector(".quan").value = parseInt(x.parentNode.parentNode.querySelector(".quan").value) + parseInt(i.innerText);
    x.parentNode.parentNode.querySelector(".total").innerHTML = parseInt(x.parentNode.parentNode.querySelector(".quan").value) * parseInt(product_price);
    calTotal();
    finished = true;
  }
})

Happy to hear, please mark the answer as accepted by clicking the grey checkmark beside on the left side :) — user19902261, Sep 07 '22 at 20:39

function don't exit with return javascript

1 Answers1