Bonjour,

Nouvelle journée = nouveau problème

Je continue dans l'essai de manipulation de JS "dynamique" de base (cad sans API et sans jQuery).

Je souhaiterais maintenant que l'utilisateur puisse afficher des infos détaillé à partir de la recherche qu'il a pu faire. Pour cela, il n'aurait qu'à cliquer sur la miniature.

Il me semble que c'est le même fonctionnement que pour un filtre basique (eventListener into variable-du-JSON.filter()) à la différence qu'il faut mettre un <a> à l'image (fait). J'ai aussi désactivé l'effet de base de ce <a> (preventDefault()) et ça semble fonctionner (ça recharge la page plutot que d'aller chercher un href="").

Le problème est que cela recharge la page de base (la même que celle qui ouvre le site). Cette page ne contient pas de produits.

Il me semble que cela viens de la constante de départ qui est marquée comme Null à l'ouverture. Et evidemment elle l'est puisque l'image miniature n'apparait que lorsque l'utilisateur sélectionne un filtre pour les produits...

Comment faire ?

Merci d'avance de votre aide

PS : il n'y a aucun ajout au html.

JS (page d'acceuil)

const imageAcceuil = document.createElement("img");
imageAcceuil.src = "Images/Main.jpg";
const sectionRight = document.querySelector(".rightBar");
sectionRight.appendChild(imageAcceuil);

JS (fonction de filtre des produits => afficher tous les produits)

const boutonTous = document.querySelector(".btn-all");
boutonTous.addEventListener("click", function(){
    document.querySelector(".rightBar").innerHTML="";
    genererMini(product);
});

JS (fonction à partir de l'image miniature)

const descMaxi = document.querySelector(".miniature");
let idImage = descMaxi.getAttribute(id);
descMaxi.addEventListener("click", function(){
    preventDefault();
    const DM = product.filter(function(prod){
        return prod.ID == idImage;
    });
    document.querySelector(".rightBar").innerHTML="";
    genererMaxi(DM);
});

JS (fonction de génération de la miniature)

function genererMini(product){
    for (let i = 0; i < product.length; i++){
        const article = product[i];
        const sectionRight = document.querySelector(".rightBar");
        const link = document.createElement("a");
        link.setAttribute("href","");
        const productElement = document.createElement("article");
        const nameElement = document.createElement("h3");
        nameElement.innerText = article.Nom;
        const imageElement = document.createElement("img");
        imageElement.src = article.Miniature;
        imageElement.setAttribute("id",article.ID);
        imageElement.classList.add("miniature");
        const cheveuxElement = document.createElement("p");
        cheveuxElement.innerText = article.Cheveux;
        const origineElement = document.createElement("p");
        origineElement.innerText = article.Origine;
        const poidsElement = document.createElement("p");
        poidsElement.innerText = article.Poids + " kg";
        const prixElement = document.createElement("p");
        prixElement.innerText = ((article.Poids * article.Prix_Kilo) * (1-article.Taux_Promo)).toFixed(2) + " €";

        sectionRight.appendChild(productElement);
        productElement.appendChild(nameElement);
        productElement.appendChild(link);
        link.appendChild(imageElement);
        productElement.appendChild(cheveuxElement);
        productElement.appendChild(origineElement);
        productElement.appendChild(poidsElement);
        productElement.appendChild(prixElement);
    }    
}

JS (fonction de génération des infos détaillées)

function genererMaxi(product){
    for (let i = 0; i < product.length; i++){
        const article = product[i];
        const sectionRight = document.querySelector(".rightbar");
        const productElement = document.createElement("article");
        const imageElement = document.createElement("img");
        imageElement.src = article.Image;
        const nameElement = document.createElement("h3");
        nameElement.innerText = article.Nom;
        const cheveuxElement = document.createElement("p");
        cheveuxElement.innerText = "Couleur de cheveux : " + article.Cheveux;
        const paysElement = document.createElement("p");
        paysElement.innerText = "Pays d'origine : " + article.Origine;
        const caracElement = document.createElement("h4");
        caracElement.innerText = "Caractéristiques :";
        const tailleElement = document.createElement("p");
        tailleElement.innerText = "Taille = " + article.Taille;
        const poidsElement = document.createElement("p");
        poidsElement.innerText = "Poids = " + article.Poids;
        const prixElement = document.createElement("h4");
        prixElement.innerText = "Prix :";
        const ptotalElement = document.createElement("p");
        ptotalElement.innerText = "Prix global : " + ((article.Poids * article.Prix_Kilo) * (1-article.Taux_Promo)).toFixed(2) + " €";
        const pkiloElement = document.createElement("p");
        pkiloElement = "Prix au kilo " + article.Prix_Kilo + " €";
        const titleDescElement = document.createElement("h4");
        titleDescElement.innerText = "Description :";
        const descElement = document.createElement("p");
        descElement.innerText = article.Description;

        sectionRight.appendChild(productElement);
        productElement.appendChild(imageElement);
        productElement.appendChild(nameElement);
        productElement.appendChild(cheveuxElement);
        productElement.appendChild(paysElement);
        productElement.appendChild(caracElement);
        productElement.appendChild(tailleElement);
        productElement.appendChild(poidsElement);
        productElement.appendChild(prixElement);
        productElement.appendChild(ptotalElement);
        productElement.appendChild(pkiloElement);
        productElement.appendChild(titleDescElement);
        productElement.appendChild(descElement);
    }
}