Discussion :

[bobyz]

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 :

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

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.

[Invité]

Bonjour,

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

Code :

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

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

1- Solution 1 : .forEach() :

Code :

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

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

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

Code :

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

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

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

Code :

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

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

[javatwister]

Soit:

Code html :

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

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

Code javascript :

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

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)
})

[bobyz]

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 :

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

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 HTML :

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

1
2
3
4
 <div>              
            <img > 
            <p></p>   
             </div>

Je ne sais pas si cela est faisable.

Merci pour votre aide.

[javatwister]

Pas compris. Tu as un aperçu?

[bobyz]

Pas compris. Tu as un aperçu?

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

Code HTML :

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

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