manage event, with addEventListener, and select dynamic input with querySelectorAll

user_19555850 0
Viewed 42

Sorry it's look like repost but I dont saw my answer in the others topics. I need to make dynamic website witch offer possibility to order some product by the Local Storage.

The client can select product and theses are show to my card.html, forEach product of my LS I made an article.

In this article there's a child, an input showing the quantity selected before by client. I would like link this input to my local storage. Client will change directly the quantity in this order page, and if there's change, he's report to my local Storage.

here there's my test function.

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

My addEventListener's not a function with quereSelectorAll, but he is with a simple querySelector. But I need to have all input created by my function.

How can I select all my input, and be sure my addEvent will running ?

queryselector addeventlistener asynchronous javascript
1 Answers
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")
      })
    });
    

}

basically you should use querySelectorAll() if you are using class it will return a node list so you can use the foreach function to loop through all of the elements with the selected class and add the event listeners

user_135423800
Related