如何为每个产品添加评论？

Question

我有一个数组来初始加载产品目录。它包含每个产品的名称和评论：

我需要在一个页面上显示所有产品，添加一个表单来为每个产品撰写评论。

挂起事件处理程序。但我只能对第一个产品添加评论。请帮助我得到正确的想法

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>

Answer 1

代表

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>