代码之家 › 专栏 › 技术社区 › Diana Heng

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

addeventlistener dom javascript

Diana Heng · 技术社区 · 2 年前

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

我需要在一个页面上显示所有的产品,添加一个表格为每个产品写一篇评论。

挂起事件处理程序。但我只能在第一个产品上添加评论。请帮我想出正确的主意

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>

1 回复 | 直到 2 年前

mplungjan 2 年前

代表

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>