How can I add a review for each individual product?

October 17, 2023

I have an array to initially load of a product catalog. It contains the names of the products and reviews for each of them:

I need to display all the products on a page, add a form to write a review for each of them.

Hung the event handler. But I can only add a review to the first product. Help me get the right idea please

initialData.forEach((num) => {
  const productsCatalog = document.querySelector('.productsCatalog');
  let productCard = document.createElement('div');
  productCard.className = "productCard";
  productsCatalog.append(productCard);
  let productName = document.createElement('p');
  productName.className = "productName";
  productName.innerHTML = num.product;
  productCard.append(productName);

  let productReviews = document.createElement('div');
  productReviews.className = "productReviews";
  productReviews.innerHTML = '<h3>Reviews:</h3>';
  productCard.append(productReviews);
  num.reviews.forEach((review) => {
    let reviewText = document.createElement('p');
    reviewText.className = "reviewText";
    reviewText.innerHTML = review.text;
    productReviews.append(reviewText);
  })
  let addReview = document.createElement('form');
  addReview.className = "addReview";
  addReview.id = "form";
  addReview.innerHTML = '<textarea class="review" id="review" name="review" rows="5" cols="33" maxlength="500" required></textarea><br><input class="submitButton" type="submit">';
  productReviews.append(addReview);
})

function handleFormSubmit(event) {
  event.preventDefault();
  let newReview = document.querySelector('.review').value;
  let reviewTextNew = document.createElement('p');
  reviewTextNew.className = "reviewText";
  reviewTextNew.innerHTML = newReview;
  let addReview = document.querySelector('form');
  addReview.before(reviewTextNew);
  addReview.reset();
}
const applicantForm = document.getElementById("form");
applicantForm.addEventListener('submit', handleFormSubmit);

<main>
  <div class="productsCatalog"></div>
</main>

<script>
  const initialData = [{
      product: "Apple iPhone 13",
      reviews: [{
          id: 1,
          text: "Review 1",
        },
        {
          id: 2,
          text: "Review 2",
        },
      ],
    },
    {
      product: "Samsung Galaxy Z Fold 3",
      reviews: [{
        id: 3,
        text: "Review 1",
      }, ],
    },
    {
      product: "Sony PlayStation 5",
      reviews: [{
        id: 4,
        text: "Review 1",
      }, ],
    },
  ];
</script>

>Solution :

Delegate

function handleFormSubmit(event) {
  event.preventDefault();
  const addReview = event.target;
  let newReview = addReview.querySelector('.review').value;
  let reviewTextNew = document.createElement('p');
  reviewTextNew.className = "reviewText";
  reviewTextNew.innerHTML = newReview;
  addReview.before(reviewTextNew);
  addReview.reset();
}
const applicantFormContainer = document.querySelector(".productsCatalog");
applicantFormContainer.addEventListener('submit', handleFormSubmit);

initialData.forEach((num) => {
  const productsCatalog = document.querySelector('.productsCatalog');
  let productCard = document.createElement('div');
  productCard.className = "productCard";
  productsCatalog.append(productCard);
  let productName = document.createElement('p');
  productName.className = "productName";
  productName.innerHTML = num.product;
  productCard.append(productName);

  let productReviews = document.createElement('div');
  productReviews.className = "productReviews";
  productReviews.innerHTML = '<h3>Reviews:</h3>';
  productCard.append(productReviews);
  num.reviews.forEach((review) => {
    let reviewText = document.createElement('p');
    reviewText.className = "reviewText";
    reviewText.innerHTML = review.text;
    productReviews.append(reviewText);
  })
  let addReview = document.createElement('form');
  addReview.className = "addReview";
  addReview.id = "form";
  addReview.innerHTML = '<textarea class="review" id="review" name="review" rows="5" cols="33" maxlength="500" required></textarea><br><input class="submitButton" type="submit">';
  productReviews.append(addReview);
})

function handleFormSubmit(event) {
  event.preventDefault();
  const addReview = event.target;
  let newReview = addReview.querySelector('.review').value;
  let reviewTextNew = document.createElement('p');
  reviewTextNew.className = "reviewText";
  reviewTextNew.innerHTML = newReview;
  addReview.before(reviewTextNew);
  addReview.reset();
}
const applicantFormContainer = document.querySelector(".productsCatalog");
applicantFormContainer.addEventListener('submit', handleFormSubmit);

<main>
  <div class="productsCatalog"></div>
</main>

<script>
  const initialData = [{
      product: "Apple iPhone 13",
      reviews: [{
          id: 1,
          text: "Review 1",
        },
        {
          id: 2,
          text: "Review 2",
        },
      ],
    },
    {
      product: "Samsung Galaxy Z Fold 3",
      reviews: [{
        id: 3,
        text: "Review 1",
      }, ],
    },
    {
      product: "Sony PlayStation 5",
      reviews: [{
        id: 4,
        text: "Review 1",
      }, ],
    },
  ];
</script>