Правильный способ сохранения значения элемента <SELECT> и прояснения от элементов DOM, сгенерированных с помощью JavaScr ⇐ Javascript

[Anonymous]

Мой текущий проект подключен к рендерингу сетки элементов, сгенерированных с помощью JavaScript из данных, сохраненных в массиве, хранящемся в отдельном файле JS (в основном сетка продуктов, которые можно добавить в корзину), все работает относительно хорошо (по крайней мере, с моей неопытной точки зрения, но я не могу понять, где мои попытки прояснить время -аут , который предполагается, только чтобы прийти в кратчайшие сроки. Так же, как мне интересно узнать, лучше ли способ сохранить значение от Select (или сохранить уникальные элементы в целом), чем генерировать уникальный класс для каждого сгенерированного элемента.
Заранее мои извинения за любительский код и, возможно, недостаточно полное объяснение. < /P>
const productGrid = document.querySelector('.js-products-grid');
const itemsInCart = document.querySelector('.js-cart-quantity');

const renderImg = image => {
const productImgSection = document.createElement('section');
const productImg = document.createElement('img');
productImgSection.classList.add('product-image-container');
productImg.classList.add('product-image');
productImg.setAttribute('src', image);
productImgSection.replaceChildren(productImg);
return productImgSection;
};

const renderRating = rating => {
const { stars, count } = rating;
const productRatingSection = document.createElement('section');
const productRatingStars = document.createElement('img');
const productRatingCount = document.createElement('section');
productRatingSection.classList.add('product-rating-container');
productRatingStars.classList.add('product-rating-stars');
productRatingCount.classList.add('product-rating-count', 'link-primary');
productRatingStars.setAttribute('src', `images/ratings/rating-${stars * 10}.png`);
productRatingCount.textContent = count;
productRatingSection.replaceChildren(productRatingStars, productRatingCount);
return productRatingSection;

};

const renderQuantitySection = (id) => {
const quantitySelectorSection = document.createElement('section');
const quantitySelector = document.createElement('select');
quantitySelector.classList.add(`js-select-quantity-${id}`);//is there better method?
quantitySelectorSection.classList.add('product-quantity-container');
for (let amount = 1; amount {
const productCheckMarkSection = document.createElement('section');
const productCheckMark = document.createElement('img');
const productAdded = document.createElement('p');
productCheckMarkSection.classList.add('added-to-cart', `js-added-to-cart-${id}`);
productAdded.textContent = 'Added';
productCheckMark.setAttribute('src', 'images/icons/checkmark.png');
productCheckMarkSection.replaceChildren(productCheckMark, productAdded);
return productCheckMarkSection;
};

const renderBtn = id => {
const btnAdd = document.createElement('button');
btnAdd.classList.add('add-to-cart-button', 'button-primary', 'js-button-add');
btnAdd.setAttribute('data-product-id', id);
btnAdd.name = 'add';
btnAdd.type = 'button';
btnAdd.textContent = 'Add to the cart'
return btnAdd;
};

const renderName = name => {
const productName = document.createElement('section');
productName.classList.add('product-name', 'limit-text-to-2-lines');
productName.textContent = name;
return productName;
};

const renderPrice = priceCents => {
const productPrice = document.createElement('section');
productPrice.classList.add('product-price');
productPrice.textContent = `$${(priceCents / 100).toFixed(2)}`;
return productPrice;
};

const renderArticle = ({ id, image, name, rating, priceCents }) => {
const productArticle = document.createElement('article');
const productSpacer = document.createElement('section');
productSpacer.classList.add('product-spacer');
productArticle.classList.add('product-container');
productArticle.replaceChildren(renderImg(image), renderName(name), renderRating(rating), renderPrice(priceCents), renderQuantitySection(id), productSpacer, renderCheckmark(id), renderBtn(id));
return productArticle;
};

products.forEach(article => productGrid.appendChild(renderArticle(article)));

const handleMessage = event => { //there main problem begins
let addedMessageTimeoutId;
if (event.target.name === 'add') {
const { productId } = event.target.dataset;
const addedElem = document.querySelector(`.js-added-to-cart-${productId}`);

addedElem.classList.add('render-add');

if (addedMessageTimeoutId) {
clearTimeout(addedMessageTimeoutId);//does not work, every time button is clicked timeOut resets
}

const timeoutId = setTimeout(() => {
addedElem.classList.remove('render-add');
}, 2000);
addedMessageTimeoutId = timeoutId;

}
};
//there main problem ends.

const handleAddItem = event => {

if (event.target.name === 'add') {
const { productId } = event.target.dataset;
const quantElem = document.querySelector(`.js-select-quantity-${productId}`);
const quantity = Number(quantElem.value);
const cartQantity = cart.reduce((n, { quantity }) => n + quantity, quantity);
const matchingItem = cart.find(item => item.productId === productId);

if (matchingItem) {
matchingItem.quantity += quantity;
} else {
cart.push({ productId, quantity });
}

itemsInCart.textContent = cartQantity;

}
};

productGrid.addEventListener('click', handleAddItem);
productGrid.addEventListener('click', handleMessage)

});


Подробнее здесь: https://stackoverflow.com/questions/797 ... om-dom-ele