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

[Invité]

Bonjour,

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

Code html :

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

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

Code js :

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

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

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

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>

[bobyz]

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.