使用addEventListener管理事件，并使用querySelectorAll选择动态输入 &

Question

对不起，这看起来像转发，但我没有在其他主题中看到我的答案。我需要做一个动态网站，提供通过本地存储订购一些产品的可能性。

客户可以选择产品，论文显示在我的card.html中，我为我的LS的每一个产品写了一篇文章。

在本文中有一个子元素，一个显示客户端之前选择的数量的输入。我想把这个输入链接到我的本地存储。客户直接将改变这个订单页面的数量,如果有变化,他的报告我的本地存储。

这里是我的测试函数。

const manageQuantity = async (createArticle) => {
await createArticle

let itemQuantity = document.querySelector('.itemQuantity')
console.log(itemQuantity)
itemQuantity.addEventListener('change', () => {
console.log("ok l'évènement est fonctionnel")
})
}
// createArticle, make the article if I've product in LS
// itemQuantity is the class of my input

我的addEventListener不是一个函数与quereSelectorAll，但他是一个简单的querySelector。但是我需要我的函数创建所有的输入

如何选择所有我的输入,并确保我的addEvent会跑步?

Answer 1

const manageQuantity = async (createArticle) => {
await createArticle

let itemQuantities = document.querySelectorAll('.itemQuantity')


itemQuantities .forEach(function(item) {
item.addEventListener('change', () => {
console.log("ok l'évènement est fonctionnel")
})
});

}

基本上你应该使用querySelectorAll()如果你正在使用类它将返回一个节点列表,这样你就可以使用foreach函数来遍历所有的元素与所选的类并添加事件监听器