Problem:
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);
