Bonjour,
Voila je rencontre un petit problème avec mon code. Je suis actuellement en formation et je dois créer un site e commerce en faisant appel à une API qui m'a été fournie, celle ci contient une liste de produits que je dois, dans un premier temps, afficher dans sa totalité sur mon site. Je l'ai donc fais de la manière suivante (voir le code de la page html et le fichier js associé ci dessous). Dans un second temps je dois au clic sur le bouton "Découvrir" de l'article, détecté l'ID de celui ci et généré les informations relatives à CE produit sur une autre page (produit.html). Le problème est que lorsque je fais appel à ma fonction getIdProduct lors du clic sur l'un des cinq boutons "Découvrir" cela me renvoie chaque ID des produits en console et de ce fait cela ne détecte pas l'ID que je souhaite "découvrir"; quelqu'un saurait il m'expliquer comment faire ? Merci beaucoup ! (ne me jugez pas trop je débute..) :D
Ce que je fais
**index.html**
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="../css/all.min.css">
<title>Orinoco - Meubles en chêne</title>
</head>
<body>
<header>
<nav class="one">
<a href="index.html"><img src="../images/orinoco.svg"/></a>
<ul>
<li><a href="panier.html"><i class="fas fa-shopping-bag fa-2x" style="color:#fff;"></i></a></li>
</ul>
</nav>
</header>
<div id="banniere">
<h1 id="titre">Meubles en chêne</h1>
<h2 id="selection">Une sélection de produits</h2>
</div>
<section id="produits">
</section>
<footer>
<nav class="one">
<ul>
<li><a href="index.html"><i class="fas fa-lock fa-2x" style="color:#fff;"></i></a></li>
</ul>
<ul>
<li><a href="index.html"><i class="fas fa-truck fa-2x" style="color:#fff;"></i></a></li>
</ul>
</nav>
</footer>
<script src="../index.js"></script>
</body>
</html>
**index.js**
// Récupération des données avec fetch //
fetch("http://localhost:3000/api/furniture/")
.then((res) => res.json())
.then((data) => {
let sectionProduits = document.getElementById("produits");
data.forEach(function(product){
// Création du HTML
let bloc = document.createElement("article");
let imageArticle = document.createElement("img");
let blocGauche = document.createElement("div");
let nomArticle = document.createElement("p");
let description = document.createElement("p");
let blocDroit = document.createElement("div");
let prix = document.createElement("p");
let lienArticle = document.createElement("a");
// Attribution des classes
bloc.setAttribute("class","product");
imageArticle.setAttribute("class", "img_article");
blocGauche.setAttribute("class", "bloc_gauche");
nomArticle.setAttribute("class","texte_nom");
description.setAttribute("class","texte_description");
blocDroit.setAttribute("class","bloc_droit");
lienArticle.setAttribute("class", "selection");
// Hiérarchie dans les éléments créés
sectionProduits.appendChild(bloc);
bloc.appendChild(imageArticle);
bloc.appendChild(blocGauche);
blocGauche.appendChild(nomArticle);
blocGauche.appendChild(description);
bloc.appendChild(blocDroit);
blocDroit.appendChild(prix);
blocDroit.appendChild(lienArticle);
// Remplissage du contenu des balises
imageArticle.src = product.imageUrl;
nomArticle.textContent = product.name;
description.textContent = product.description;
prix.textContent = product.price/100 + ",00€";
lienArticle.textContent = "Découvrir";
// lienArticle.href = 'produit.html?' + product._id;
lienArticle.addEventListener("click", getIdProduct);
});
function getIdProduct() {
var idProduct = data;
// Affiche tous les ID au clic sur l'un des 5 boutons
for (var i = 0; i < idProduct.length; i++){
if (idProduct[i].code == this._id){
console.log(idProduct[i]._id);
} else {
console.log('ID non trouvé');
}
}
}
})
.catch(error => console.log("Erreur : " + error))