checkbox javascript
Levy Stephane
Salut à tous j'espere que vous allez bien. J'ai besoins d'aide à propros de mon code typescript
j'essai me mettre à jour de maniere instantané le prix totale et la quantité totale de poduits au panier d'un utilisateur lorsque celui ci saisis une quantité de produit dans le champ input de type number associé au produit concerné mais uniquement si la case à cocher associé à ce produit est marqué comme "checked"
la fonction de mis à jour
function updateCart(products:Element|NodeListOf<Element>) {
let totalQuantity = 0;
let totalPrice = 0;
processNodes(products,(p)=>{
let product = p as HTMLElement;
let field = product.querySelector('.quantity-value') as HTMLInputElement;
let priceText = product.querySelector('.sc-price') as HTMLElement;
const quantity = parseInt(field.value)||0;
const price = parseFloat(priceText.innerHTML);
totalPrice += price*quantity;
totalQuantity += quantity;
const checkboxinput = product.querySelector('.child-checkbox') as HTMLInputElement;
if(null !== checkboxinput && checkboxinput.hasAttribute('checked')){
updateCartData(totalPrice,totalQuantity);
}
})
}la fonction processNodes() (juste pour savoir ce quelle fait)
/**
* Cette fonction permet de convertir un objet NodeList en un tableau d'éléments HTML (HTMLElement)
* et d'exécuter une fonction de rappel sur chaque élément du tableau.
* @param nodeList Un objet NodeList ou un élément HTML.
* Si c'est un NodeList, il sera converti en tableau d'éléments HTML.
* @param callback Une fonction de rappel à exécuter sur chaque élément du tableau.
* @returns
*/
export function processNodes(nodeList: any, callback = (node: any) => {}){
if(nodeList instanceof NodeList) {
return Array.from(nodeList).forEach(node => {
callback(node);
});
}
if(null !== nodeList && undefined !== nodeList)
return callback(nodeList);
}
Ce que j'obtiens
malheureusement si le panier contient deux produit par exemple et que champ checkbox du produit 1 est coché, donc contient l'attribut checked et pas celui du produit 2 la mise à jour instanté du panier lors de la saisis de l'utilisateur s'éffectue quand meme pour les deux produits peu importe que le deuxieme produit ne soit pas coché par contre cela fonctionne correctement que si les deux produits du panier ne sont pas coché. J'ai cherché longtemps sans trouver de réponse.
1 réponse
Hello,
Dans ton code, tu calcule d'abord le prix total et la quantité totale pour tous les produits, puis tu vérifie si la case à cocher du produit est cochée avant de mettre à jour les données du panier. Cela signifie que si au moins une case à cocher est cochée, le total du panier sera mis à jour avec le total de tous les produits, que leur case à cocher soit cochée ou non.
Faut que tu change un peu ta fonction pour faire ta vérif un peu plus tôt c'est tout.
function updateCart(products:Element|NodeListOf<Element>) {
let totalQuantity = 0;
let totalPrice = 0;
processNodes(products, (p) => {
let product = p as HTMLElement;
let field = product.querySelector('.quantity-value') as HTMLInputElement;
let priceText = product.querySelector('.sc-price') as HTMLElement;
const checkboxinput = product.querySelector('.child-checkbox') as HTMLInputElement;
// Fait ta vérif ici
if(checkboxinput && checkboxinput.checked) {
const quantity = parseInt(field.value) || 0;
const price = parseFloat(priceText.innerHTML);
totalPrice += price * quantity;
totalQuantity += quantity;
updateCartData(totalPrice,totalQuantity);
}
})
}
j'utilise checkboxinput.checked au lieu de checkboxinput.hasAttribute('checked').
La raison est que hasAttribute('checked') vérifie simplement si l'attribut checked a été défini sur l'élément lors de son chargement initial, tandis que checked retourne l'état actuel de la case à cocher, qui peut avoir été modifié par l'utilisateur après le chargement de la page.