Affichage d'objets dans une même DIV

**tony060** · 27/10/2020, 15h36

Bonjour;

Voila j 'ai récupéré mon tableau, j'ai 5 produits à l'intérieur du tableau (nom , description, prix et un bouton pour renvoyer vers la page produit). J'ai créer dans HTML 5 div pour les placer seulement tous mes produits sont dans la même div du coup impossible de les placés avec mon css. Ce que je souhaite c'est la photo puis en dessous le titre de l'objet, en dessous sa description et pour finir le prix.(voilà l'ordre des éléments) Si quelqu'un un peut m'aider se serait sympa.
Merci par avance.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="robots" content="index, follow">
		<meta name="description" content="La boutique Orinoco vends des appareils photos de qualité à prix très abordable">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="https://kit.fontawesome.com/cf7cad016f.js" crossorigin="anonymous"></script>
		<title>Orinoco -Accueil</title>
	</head>
	<body>
		<header>
			<img class="header__logo" src="images/logo.png" alt="logo Orinoco">
			<h1 class="header__h1">Bienvenue sur Orinoco</h1>
			<ul class="header__validation">
				<li><a class="header__validation_commande" href="confirmation_de_commande.html"></i>Commandes</a></li>
				<li><a class="header__validation_panier" href="panier.html"><i class="fas fa-shopping-cart"></i>&nbsp; Panier</a></li>
			</ul>
		</header>
		<main>
			<h2 class="main_h2">Trouvez votre appareil photo vintage</h2>
			<p class="main__text">
				Qui dit photographie dit forcément appareil photo... La gamme de produits présente sur le marché est vaste et 
				propose de nombreuses références.
				Chez Orinoco, vous obtiendrez des modèles à la pointe de la technologie.
			</p>
			<section id="produit">
				<div class="cameras"></div>
				<div class="cameras"></div>
				<div class="cameras"></div>
				<div class="cameras"></div>
				<div class="cameras"></div>
			</section>
		</main>
		<footer>
			<a class="text" href="#">À propose de nous</a>
			<a class="text" href="#">Contactez-nous</a>
		</footer>		
		<script src="essai.js"></script>
	</body>
</html>

mon code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//section de mes divs
document.getElementsByClassName("cameras")
 
//requête
fetch('http://localhost:3000/api/cameras')
  .then(function(response){
    return response.json()
  }).then (function (data) {
    console.log(data)
    for(let i = 0; i <data.length; i++){
 
      //création de ma balise image
      let images = document.createElement("img");
      images.classList.add("images")
      images.textContent = data[i].imageUrl ;
      images.setAttribute('src', data[i].imageUrl);
      document.querySelector("div").appendChild(images);
 
      //création de mon nom de l'article
      let names = document.createElement("H2");
      names.textContent = data[i].name;
      document.querySelector("div").appendChild(names);
 
      //création de mon paragraphe: description
      let description = document.createElement("p");
      description.textContent = data[i].description;
      document.querySelector("div").appendChild(description);
 
 
 
      //création de l'emplacement prix
      let price = document.createElement("p");
      price.textContent = data[i].price/100 + "€";
      document.querySelector("div").appendChild(price);
 
      //création de mon bouton
      let button = document.createElement("div");
      button.classList.add("button_detail");
      button.innerHTML = `<a href=produit.html?id=${data._id}><button class="button_detail" type="button">Détails</button></a>`;
      document.querySelector("div").appendChild(button);
 
    }
  })

**jojo9503** · 28/10/2020, 11h30

Salut,

Je débute en javascript mais à première vue c'est ton : document.querySelector("div") qui ne va pas pour ce que tu as besoin de faire.

En effet il va aller chercher le premier objet qu'il trouve. Donc peut importe où tu es dans ta boucle il va toujours trouver la première div.

A ta place pour ce code simple j’enlèverai les div class='cameras' du HTML et je les créerais directement dans ta boucle javascript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
boucle{
const divCamera = createElement('div')
classList.add('camera')
const XXX
const YYY
const ZZZ
 
divCamera.appendChild(XXX)
divCamera.appendChild(YYY)
divCamera.appendChild(ZZZ)
ou
divCamera.append(XXX,YYY,ZZZ)
}

**javatwister** · 28/10/2020, 13h08

Mettons qu'il n'y ait pas d'erreur ailleurs, ajoute simplement l'indice de la collection à chaque fois que tu fais un append:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector("div")[i].appendChild(images);

etc.

**tony060** · 28/10/2020, 17h23

Merci a vous deux pour votre réponse, cependant j'ai essayé la façon dont que vous m'avez indiquer mais cela n'a pas fonctionner. J'ai trouvé un autre moyen et sa fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.getElementById("produit");
let cameras = document.getElementsByClassName("cameras");
 
//requête
fetch('http://localhost:3000/api/cameras') 
  .then(function(response){
    return response.json()
  }).then (function (data) {
    console.log(data)
    for(let i = 0; i <data.length; i++){
      cameras[i].innerHTML = `<img class=images + src="${data[i].imageUrl}" alt="caméras"/><figcaption id="text_produit"><h2>${data[i].name}</h2><p class="description"> Description: ${data[i].description}</p><p id="price"> Prix: ${data[i].price/100}€</p><a href="produit.html?_id=${data[i]._id} class="liens"><button>Aperçu</button></a></figcaption>`
      cameras[i].setAttribute("data-id", data[i]._id)
 
 
    }        
})
.catch(function(err) {
    console.log('Fetch Error ', error);
});