1

I want to make array of all the buttons that inside the article tags.

When i select all buttons -i mentioned- that i added with (element.innerHTML) to use it in my JavaScript code,it doesn't work.

I tried to console.log the selected buttons but console gives me an empty array? is there a wrong in my way of selection or there's another way to reuse that buttons in my JavaScript code?

const productsCenter = document.querySelector(".products-center");

class Displayproducts {
      async getData() {
            try {
                  let response = await fetch("products.json");
                  let data = await response.json();
                  let products = data.items;
                  let mapped = products.map((el) => {
                        const { title, price } = el.fields;
                        const image = el.fields.image.fields.file.url;
                        const id = el.sys.id;
                        return { title, price, image, id };
                  });
                  return mapped;
            } catch (err) {
                  console.log(err);
            }
      }
}
class UI {
      displayProducts(products) {
            products.forEach((product) => {
                  let result = `<article class="product">
                                          <div class="img-container">
                                                <img
                                                      src="${product.image}"
                                                      alt="product"
                                                      class="product-img"

                                                />
                                                <button class="bag-btn" data-id="${product.id}">
                                                      <i class="fas fa-shopping-cart"></i>
                                                       add to bag
                                                </button>
                                          </div>
                                          <h3>${product.title}</h3>
                                          <h4>${product.price}</h4>
                                    </article>`;
                  productsCenter.innerHTML += result;
            });
      }
}
window.onload = () => {
      const product = new Displayproducts();
      const ui = new UI();
      product.getData().then((products) => {
            ui.displayProducts(products);
      });
      const bagBtns = [...document.querySelectorAll(".bag-btn")];
      console.log(bagBtns);
};
 <body>
            <!-- start of nav bar -->
            <nav class="navbar">
                  <div class="navbar-center">
                        <span class="nav-icon">
                              <i class="fas fa-bars"></i>
                        </span>
                        <img
                              src="C:\Users\iman\Desktop\comfy-house\images\logo.svg"
                              alt="logo"
                        />
                        <div class="cart-btn"></div>
                        <span class="nav-icon">
                              <i class="fas fa-cart-plus"></i>
                        </span>
                        <div class="cart-items">0</div>
                  </div>
            </nav>
            <!-- end of nav bar -->
            <!-- start of header -->
            <header class="hero">
                  <div class="banner">
                        <h1 class="banner-title">furniture collection</h1>
                        <button class="banner-btn">shop now</button>
                  </div>
            </header>
            <!-- end of header -->
            <!-- start of cart -->
            <div class="cart-overlay">
                  <div class="cart">
                        <span class="close-cart">
                              <i class="fas fa-window-close"></i>
                        </span>
                        <h2>your cart</h2>
                        <div class="content"></div>
                        <!-- start of cart item  -->

                        <!-- end of cart item -->
                  </div>
            </div>
            <!-- end of cart -->
            <!-- start of products-->
            <section class="products">
                  <div class="section-title">
                        <h2>our products</h2>
                  </div>
                  <div class="products-center">
                     
                  </div>
            </section>

            <!-- end of products -->

            <script src="app.js"></script>
      </body>
itamar davidyan
  • 60
  • 6
emyy96
  • 199
  • 1
  • 8
  • This doesn't exactly answer your question, but I'm sure it'll help you understand the problem and how to approach the issue: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript – icecub Jul 04 '20 at 07:00
  • querySelect inside the `.then()` of `.getData()` after `ui.displayProducts(products)`, there is no buttons before you fetch back datas – Rex Hsu Jul 04 '20 at 07:00

1 Answers1

0

In the window.onload function the const bagBtns = [...document.querySelectorAll(".bag-btn")]; line happened before the ui.displayProducts(products); line - you can see, add console.log('after') inside the callback function and see what happen.

This happen because - read this article

sulotions:

  1. use async await
  2. move the next lines:
const bagBtns = [...document.querySelectorAll(".bag-btn")];
console.log(bagBtns);

after:

ui.displayProducts(products);
itamar davidyan
  • 60
  • 6