如何为商品目录中每个独立商品添加评论？

问题描述 #

通过initialData数组初始化商品目录，数组包含商品名称及对应评论数据，需求是展示所有商品并为每个商品添加评论提交表单。但目前仅第一个商品的评论表单能正常提交，其余表单无响应。

问题根源 #

1. 重复ID冲突：所有表单都设置了相同的id="form"，HTML中ID必须唯一，导致document.getElementById("form")只能获取到第一个表单，仅第一个表单绑定了提交事件。
2. 全局元素选择错误：提交处理函数中使用document.querySelector('.review')和document.querySelector('form')，始终获取页面中第一个匹配的元素，无论哪个表单提交，都会操作第一个商品的输入框和表单。

修复代码 #

修复后的JavaScript代码 #

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";
  // 移除重复的id属性
  addReview.innerHTML = '<textarea class="review" name="review" rows="5" cols="33" maxlength="500" required></textarea><br><input class="submitButton" type="submit">';
  productReviews.append(addReview);
  
  // 为每个表单单独绑定提交事件
  addReview.addEventListener('submit', handleFormSubmit);
})

function handleFormSubmit(event) {
  event.preventDefault();
  // 通过event.target获取当前提交的表单，在表单内部查找评论输入框
  const currentForm = event.target;
  const newReview = currentForm.querySelector('.review').value;
  
  let reviewTextNew = document.createElement('p');
  reviewTextNew.className = "reviewText";
  reviewTextNew.innerHTML = newReview;
  
  // 在当前表单前插入新评论
  currentForm.before(reviewTextNew);
  currentForm.reset();
}

// 移除原有的仅绑定第一个表单的代码
// const applicantForm = document.getElementById("form");
// applicantForm.addEventListener('submit', handleFormSubmit);

HTML代码（无需修改） #

<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>

关键修改说明 #

• 移除重复ID：删除表单的id="form"属性，避免ID冲突。
• 逐个绑定事件：在创建每个表单后，直接为该表单绑定提交事件，确保每个表单都能触发处理函数。
• 基于当前表单操作：在处理函数中通过event.target获取当前提交的表单，然后在该表单范围内查找输入框、插入评论，确保操作的是当前商品的表单和评论区。

内容的提问来源于stack exchange，提问作者Diana Heng