Bonjour, je cherche à faire un système de panier sur mon site (qui doit s'actualiser sans rechargement de la page, afin de pouvoir le visionner sans changer de page).

J'ai donc une structure de base dans mon HTML que je récupère, et que je clone en JS. Lorsque l'utilisateur ajoute un élément dans son panier, je supprime tous les enfants de cette div, et je rajoute la nouvelle liste d'élément mis à jour.

Le problème c'est que s'il y a plusieurs éléments (et donc plusieurs itérations dans mon forEach) ça ne m'ajoute qu'un seul élément et non plusieurs, et pourtant dans la console il y a bien plusieurs éléments ressortit par le console.log().

Code :

const cartContent = document.getElementById("cartContent");
let clone = document.querySelector(".cartArticle").cloneNode(true);

function displayArti(array) {
    while (cartContent.hasChildNodes()) {
        cartContent.removeChild(cartContent.lastChild);
    }
    let totalCost = 0;
    array.forEach(elt => {
        totalCost = totalCost + (elt[6]*elt[3]);

        clone.querySelector(".artiTitle").innerHTML = elt[5];
        clone.querySelector(".artiDesc").innerHTML = "Prix : "+elt[6]+"€ | Quantité : "+elt[3];
        console.log(clone);
        cartContent.appendChild(clone);
    });
    buyMenu.style.display = "flex";
    amountDiv.innerHTML = "Total : " + totalCost + "€";
    
}

D'où viendrait mon problème ? Ai-je oublié quelque chose ? Merci d'avance.

Bonjour je ne suis pas totalement sur mais je pense que cela peut venir du fait que tu as cloné l'élément en dehors de ta boucle donc tu manipule le même clone à chaque tour de boucle, en re créant le clone à chaque itération tu obtient un nouvel élément à chaque fois.

const cartContent = document.getElementById("cartContent");
let cardArticle = document.querySelector(".cartArticle");
 
function displayArti(array) {
    while (cartContent.hasChildNodes()) {
        cartContent.removeChild(cartContent.lastChild);
    }
    let totalCost = 0;
    array.forEach(elt => {
        totalCost = totalCost + (elt[6]*elt[3]);
        
        // re créé un clone de l'élément pour chaque tour de boucle
        const clone = cardArticle.cloneNode(true);
 		
        // modifie le clone actuel
        clone.querySelector(".artiTitle").innerHTML = elt[5];
        clone.querySelector(".artiDesc").innerHTML = "Prix : "+elt[6]+"€ | Quantité : "+elt[3];
        
        console.log(clone);
        
        // ajoute le clone actuel dans le DOM
        cartContent.appendChild(clone);
    });
    buyMenu.style.display = "flex";
    amountDiv.innerHTML = "Total : " + totalCost + "€";
     
}

En effet en le recréant ca marche niquel, merci ! (j'ai juste recréer après le appendChild et conserver la première création au dessus, sinon je pouvais pas cloner a cause du while qui supprime tout)

const cartContent = document.getElementById("cartContent");
let clone = document.querySelector(".cartArticle").cloneNode(true);

function displayArti(array) {

    while (cartContent.hasChildNodes()) {
        cartContent.removeChild(cartContent.lastChild);
    }
    let totalCost = 0;
    array.forEach(elt => {
        totalCost = totalCost + (elt[6]*elt[3]);

        clone.querySelector(".artiTitle").innerHTML = elt[5];
        clone.querySelector(".artiDesc").innerHTML = "Prix : "+elt[6]+"€ | Quantité : "+elt[3];
        cartContent.appendChild(clone);
        clone = document.querySelector(".cartArticle").cloneNode(true);
    });
    buyMenu.style.display = "flex";
    amountDiv.innerHTML = "Total : " + totalCost + "€";
    
}