Inserer image dans html avec forEach

Bonjour,

je cherche avec désespoir comment insérer des images récupérer par un forEach dans mon html.

Voici mon bout de code :

Code:

---

1 2 3 4 5

const list = [slide1.img, slide2.img, slide3.img, slide4.img] list.forEach(diapo); function diapo(item){   }

---

Merci pour votre aide.

Bonjour,

0- D'abord, il faut construire correctement la liste :

Code:

---

const img_src_list = ['slide1.img', 'slide2.img', 'slide3.img', 'slide4.img'];

---

1- Solution 1 : .forEach() :

Code:

---

1 2 3

img_src_list.forEach ( function(img_src){ console.log(img_src); });

---

2- Solution 2 : for(... of ...) :

Code:

---

1 2 3

for (let img_src of img_src_list) { console.log(img_src); }

---

3- Solution 3 : for(... in ...) :

Code:

---

1 2 3 4

for (let idx in img_src_list) { let img_src = img_src_list[idx]; console.log( img_src ); }

---

Soit:

Code:

---

<div id="diapo"></div>

---

Code:

---

1 2 3 4 5 6

const img_src_list = ['sm01.gif', 'slide2.img', 'slide3.img', 'slide4.img']; img_src_list.forEach ((v)=> { let im=document.createElement("img"); im.src=v; document.getElementById("diapo").appendChild(im) })

---

Bonjour;

ça marche super bien. Merci.

Mais en faite je m'y suis mal pris dans ma question car j'avais pas saisie un autre truc.

En faite je part de ça

Code:

---

var monSlider = [slide2, slide3, slide4];

---

Chaque slide2 slide3 et slide4 contiennent chacun une image et un texte. Je voudrais mettre chaque slide entre une div différente. Comme suit:

Code:

---

1 2 3 4

<div> <img > <p></p> </div>

---

Je ne sais pas si cela est faisable.

Merci pour votre aide.

Pas compris. Tu as un aperçu?

Citation:

---

Envoyé par javatwister

Pas compris. Tu as un aperçu?

---

En faite il faudrais que ç a me ressorte comme ça :

Code:

---

1 2 3 4

<div class="diapo"> <img src="img/img2.jpg"> <p id="txt2"></p> </div>

---

l'image et le texte de chaque slide entre une div !

Merci pour l'aide

Bonjour,

on va supposé que chaque slide est un objet comportant : "src" et "txt".

Code:

---

<div id="mon-slider"></div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const mon_slider = document.getElementById('mon-slider'); const mon_slider_slides = [slide2, slide3, slide4]; mon_slider_slides.forEach( function(slide){ let div = document.createElement('div'); div.classList.add('diapo'); mon_slider.appendChild(div);   let img = document.createElement('img'); img.src = slide.src; div.appendChild(img)   let p = document.createElement('p'); p.contentText = slide.txt; div.appendChild(p) });

---

On obtient :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="mon-slider"> <div class="diapo"> <img src="img/img1.jpg"> <p>texte 1</p> </div> <div class="diapo"> <img src="img/img2.jpg"> <p>texte 2</p> </div> <div class="diapo"> <img src="img/img3.jpg"> <p>texte 3</p> </div> </div>

---

Merci camarade, ça marche impec! en faite j'étais bien partie avec ce qu'il m'avais dit plus haut, mais j'avais une merde avec une div déjà en place qui me faisait foirer le truc, Il à fallut que j'utilise ton code, et en voyant que ça ne marchait pas non plus, j'ai vu le problème.

Manque de vigilance de me part.

Me reste plus qu'as trouver comment mettre tout cela en orienté objet.

Merci encore.