JavaScript Loop not iterating through objects when called

Question

I'm having an issue where when I click on my 'add to cart' button the only object returned is the top object. My add to cart button has the correct html class because it adds to the cart.

Ideally, based on the product page I am on, when I click the 'add to cart' button it should iterate through the objects for the matching object to retrieve that information.

I have included an example html page just in case I've made a mistake in there, please be aware that it is quite a heavy HTML file. It was a template but I was trying to redo the cart JS with my own JS as the previous was bad.

    let carts = document.querySelectorAll('.item_add')



let products = [
  {
    name: "Philips 23.8 Full HD 144Hz FreeSync Gaming Monitor",
    image: "images/Phillips Monitor.jpg",
    price: 149.99,
    inCart: 0
  },
  {
    name: "LG 27 IPS Full HD 75Hz Monitor",
    image: "images/LG IPS.jpg",
    price: 249.99,
    inCart: 0
  },
  {
    name: 'Samsung 23.5 Full HD LED Curved Monitor',
    image: 'images/Samsung Monitor.jpg',
    price: 249.99,
    inCart: 0
  },
  {
    name: "Lenovo D27-30 27 Full HD Monitor",
    image: "images/Lenovo Monitor.jpg",
    price: 229.99,
    inCart: 0
  },
  {
    name: "Dell S2421HGF 24 Full HD 144Hz Gaming Monitor",
    image: "images/Dell Monitor.jpg",
    price: 229.99,
    inCart: 0
  },

];

for (let i = 0; i < carts.length; i++) {
  carts[i].addEventListener('click', () => {
    cartNumbers(products[i]);
  })
}

function onLoadCartNumbers() {
  let productNumbers = localStorage.getItem('cartNumbers');

  if (productNumbers) {
    document.querySelector('.cart span').textContent = productNumbers;
  }

}

    function cartNumbers(product) {
      console.log("The product clicked is", product)
      let productNumbers = localStorage.getItem('cartNumbers')
    
      productNumbers = parseInt(productNumbers);
    
      if (productNumbers) {
        localStorage.setItem('cartNumbers', productNumbers + 1);
        document.querySelector('.cart span').textContent = productNumbers + 1;
      } else {
        localStorage.setItem('cartNumbers', 1);
        document.querySelector('.cart span').textContent = 1;
    
      }
    }


            ============================================= -->
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>


<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>


<!-- Start Header Area -->
<header class="header_area sticky-header">
    <div class="main_menu">
        <nav class="navbar navbar-expand-lg navbar-light main_box">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <a class="navbar-brand logo_h" href="index.html"><img src="img/Cware small.png" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
                    <ul class="nav navbar-nav menu_nav ml-auto">

                        <li class="nav-item submenu dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Products</a>
                            <ul class="dropdown-menu">
                                <li class="nav-item"><a class="nav-link" href="pchardware.html">PC Hardware</a></li>
                                <li class="nav-item"><a class="nav-link" href="monitor.html">Monitors</a></li>
                                <li class="nav-item"><a class="nav-link" href="keyboard.html">Keyboards</a></li>
                                <li class="nav-item"><a class="nav-link" href="cable.html">Cables</a></li>
                                <li class="nav-item"><a class="nav-link" href="audio.html">Audio</a></li>
                            </ul>
                        </li>

                        </li>
                        <li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>
                        <li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
                        <li class="nav-item submenu dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Account</a>
                            <ul class="dropdown-menu">
                                <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
                                <li class="nav-item"><a class="nav-link" href="sign.html">Sign up</a></li>
                            </ul>
                        </li>
                        <li class="nav-item cart"><a class="nav-link" href="cart.html">View Cart (<span
                                    class="">0</span>)</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">

                        <li class="nav-item">
                            <button class="search"><span class="lnr lnr-magnifier" id="search"></span></button>
                        </li>
                    </ul>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="search_input" id="search_input_box">
        <div class="container">
            <form class="d-flex justify-content-between">
                <input type="text" class="form-control" id="search_input" placeholder="Search Here">
                <button type="submit" class="btn"></button>
                <span class="lnr lnr-cross" id="close_search" title="Close Search"></span>
            </form>
        </div>
    </div>
</header>
<!-- End Header Area -->

<!-- Start Banner Area -->
<section class="banner-area organic-breadcrumb">
    <div class="container">
        <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
            <div class="col-first">

                </nav>
            </div>
        </div>
    </div>
</section>
<!-- End Banner Area -->

<div class="simpleCart_shelfItem">
    <div class="product_image_area">
        <div class="container">
            <div class="row s_product_inner">
                <div class="col-lg-6">
                    <br>
                    <br>
                    <br>
                    <image class="item_image product_image" src="images/LG IPS.jpg"
                        alt="LG 27 Inch IPS Full HD 75Hz Monitor" />
                </div>
                <div class="col-lg-5 offset-lg-1">
                    <div class="s_product_text">
                        <div class="product">

                            <!--<image class="item_image product_image" src="images/Airpods 2.jpg" alt="Apple Airpods with Charging Case (2nd Gen)"/>-->

                            <h2 class="item_name">LG 27 IPS Full HD 75Hz Monitor</h2>
                            <p></p>
                            <h2 class="item_price">$249.99</h2>
                            <ul class="list">
                                <li><a class="" href="monitor.html"><span>Category:</span>Monitors</a></li>
                                <li><a><span>Availibility:</span>In Stock</a></li>
                            </ul>
                            <p align="Justify">A great upgrade for your compatible computer setup, the LG 27-inch
                                27ML600 Full HD Monitor offers a large display and optimal picture quality for an
                                immersive gaming and viewing experience.</p>
                            <div class="product_count">
                                <label for="qty">Quantity:</label>
                                <input type="text" value="1" class="item_Quantity" /><br />
                            </div>

                            <div class="card_area d-flex align-items-center">
                                <a class="primary-btn item_add cart1" href="javascript:;">Add to Cart</a>
                                <!--<a class="icon_btn" href="#"><i class="lnr lnr lnr-diamond"></i></a>-->
                                <!--<a class="icon_btn" href="#"><i class="lnr lnr lnr-heart"></i></a>-->

Can you post the sample in a fiddle as well? Like codepen or jsdiddle. The code looks incomplete for me to work on it. — T.kowshik Yedida, Aug 15 '21 at 05:06
https://jsfiddle.net/#&togetherjs=59vf8rE4AA @T.kowshikYedida — stormshadow854, Aug 15 '21 at 05:13

score 0 · Answer 1 · answered Aug 15 '21 at 05:06

0

Try var i = 0 for loop iterator instead of let i = 0.

Or you could set a new variable equal to i in the loop block.

for (let i = 0; i < carts.length; i++) {
  let index = i;
}

See this question for more info.

answered Aug 15 '21 at 05:06

Spankied

1,626
13
21

JavaScript Loop not iterating through objects when called

1 Answers1