Boucle Mosaique

JavaScript
#1

Bonjour j’aimerai faire une boucle sur une div (img-wrapper) pour éviter d’avoir une tonne de div pouvez vous m’aider.
Merci de vos réponses.

<!DOCTYPE html>
<html>
<head>
	<title>Mosaique</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
	
                                         <!-- LES CHANNELS -->

<body>
  	<div class="wrapper">
  		<div id="channel-viceland" class="img-wrapper">
  			<img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload=null; this.src=getImages('viceland');"  
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">VICELAND</span>
  		</div>
  		<div id="channel-rmc-sport" class="img-wrapper">
  			<img id="channel-rmc-sport-img" class="video" src="./images-et-video/rmc-sport.jpg" onload="this.onload=null; this.src=getImages('rmc-sport');"  
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">RMC SPORT</span>
  		</div>
  		<div id="channel-lci" class="img-wrapper">
  			<img id="channel-lci-img" class="video" src="./images-et-video/lci.jpg" onload="this.onload=null; this.src=getImages('lci');"
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LCI</span>
  		</div>
  		<div id="channel-vision tv" class="img-wrapper">
  			<img id="channel-vision-tv-img" class="video" src="./images-et-video/vision-tv.jpg" onload="this.onload=null; this.src=getImages('vision-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">VISION TV</span>
  		</div>
  		<div id="channel-loutre tv" class="img-wrapper">
  			<img id="channel-loutre-img" class="video" src="./images-et-video/loutre-tv.jpg" onload="this.onload=null; this.src=getImages('loutre-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LOUTRE TV</span>
  		</div>
  		<div id="channel-farming" class="img-wrapper">
  			<img id="channel-farming-img" class="video" src="./images-et-video/farming.jpg" onload="this.onload=null; this.src=getImages('farming');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">FARMING</span>
  		</div>
  		<div id="channel-nrj12" class="img-wrapper">
  			<img id="channel-nrj12-img" class="video" src="./images-et-video/nrj12.jpg" onload="this.onload=null; this.src=getImages('nrj12');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">NRJ12</span>
  		</div>
  		<div id="channel-arte" class="img-wrapper">
  			<img id="channel-arte-img" class="video" src="./images-et-video/arte.jpg" onload="this.onload=null; this.src=getImages('arte');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">ARTE</span>
  		</div>
  		<div id="channel-bein sport" class="img-wrapper">
  			<img id="channel-bein-sport-img" class="video" src="./images-et-video/bein-sport.jpg" onload="this.onload=null; this.src=getImages('bein-sport');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">BEIN SPORT</span>
  		</div>
  		<div id="channel-lbc" class="img-wrapper">
  			<img id="channel-lbc-img" class="video" src="./images-et-video/lbc.jpg" onload="this.onload=null; this.src=getImages('lbc');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LBC</span>
  		</div>
  		<div id="channel-bfm" class="img-wrapper">
  			<img id="channel-bfm-img" class="video" src="./images-et-video/bfm.jpg" onload="this.onload=null; this.src=getImages('bfm');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">BFM</span>
  		</div>
  		<div id="channel-paysage tv" class="img-wrapper">
  			<img id="channel-paysage tv-img" class="video" src="./images-et-video/paysage-tv.jpg" onload="this.onload=null; this.src=getImages('paysage-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">PAYSAGE TV</span>
  		</div>
  		<div id="channel-tf1" class="img-wrapper">
  			<img id="channel-tf1-img" class="video" src="./images-et-video/tf1.jpg" onload="this.onload=null; this.src=getImages('tf1');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">TF1</span>
  		</div>
  		<div id="channel-turbo" class="img-wrapper">
  			<img id="channel-turbo-img" class="video" src="./images-et-video/turbo.jpg" onload="this.onload=null; this.src=getImages('turbo');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">TURBO</span>
  		</div>
  		<div id="channel-telefoot" class="img-wrapper">
  			<img id="channel-telefoot-img" class="video" src="./images-et-video/telefoot.jpg" onload="this.onload=null; this.src=getImages('telefoot');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">TELEFOOT</span>
  		</div>
  		<div id="channel-canadian" class="img-wrapper">
  			<img id="channel-canadian-img" class="video" src="./images-et-video/canadian.jpg" onload="this.onload=null; this.src=getImages('canadian');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">CANADIAN</span>
  		</div>
  		<div id="channel-mountain-tv" class="img-wrapper">
  			<img id="channel-mountain-tv-img" class="video" src="./images-et-video/mountain-tv.jpg" onload="this.onload=null; this.src=getImages('mountain-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">MOUNTAIN TV</span>
  		</div>
  		<div id="channel-ldc-news" class="img-wrapper">
  			<img id="channel-ldc-news-img" class="video" src="./images-et-video/ldc-news.jpg" onload="this.onload=null; this.src=getImages('ldc-news');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LDC NEWS</span>
  		</div>
  		<div id="channel-sky-sport" class="img-wrapper">
  			<img id="channel-sky-sport-img" class="video" src="./images-et-video/sky-sport.jpg" onload="this.onload=null; this.src=getImages('sky-sport');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">SKY SPORT</span>
  		</div>
  		<div id="channel-lake-tv" class="img-wrapper">
  			<img id="channel-lake-tv-img" class="video" src="./images-et-video/lake-tv.jpg" onload="this.onload=null; this.src=getImages('lake-tv');"
        onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LAKE TV</span>
  		</div>

                                            <!-- LE MODAL -->
		
		<div id="modal" class="w3-modal">
			<span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal.style.display='none'">×</span>
			<!-- Le contenu de la modal -->
  			<div id="videoid" class="w3-modal-content w3-animate-zoom">
    			<video id="video" controls loop="0">
    				<!-- La vidéo -->
		        	<source src="./images-et-video/bfm-radio.mp4" class="video">
				</video>
    		</div>
    	</div>	
	</div>
<script src="javascript/script.js"></script>
</body>
</html>
#2

Bonjour @Maxime_KERBRAT

Si vous deviez créer manuellement un seul de ces éléments, voici la liste des manipulations de DOM que vous devriez effectuer en vous aidant de cette liste : https://blog.lesieur.name/vanilla-js-france/

JavaScript :

	// Cibler l'élément parent qui va contenir la liste d'élément.
var elWrapper = document.getElementsByClassName('wrapper')[0],
	// Créer un élément exemple
    item = document.createElement("div");

// Créer des attributs à cet élément exemple
item.id = 'channel-viceland';
item.classList.add('img-wrapper');

// Remplir l'élément avec du contenu HTML
item.innerHTML = '<img id="channel-viceland-img"'
	+ ' class="video"'
	+ ' src="./images-et-video/viceland.jpg"'
	+ ' onload="this.onload=null;this.src=getImages(\'viceland\');"'
	+ ' onclick="onClick(this)" class="w3-hover-opacity">'
 	+ '<span class="text">VICELAND</span>';

// Insérer l'élément exemple dans la cible parent
elWrapper.appendChild(item);

en utilisant le HTML suivant

HTML :

<div class="wrapper"></div>

Cela donnera

Résultat :

<div class="wrapper"><div id="channel-viceland" class="img-wrapper"><img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload=null;this.src=getImages('viceland');" onclick="onClick(this)"><span class="text">VICELAND</span></div></div>

Resultat (mis en forme) :

<div class="wrapper">
	<div id="channel-viceland" class="img-wrapper">
		<img id="channel-viceland-img"
			class="video"
			src="./images-et-video/viceland.jpg"
			onload="this.onload=null;this.src=getImages('viceland');"
			onclick="onClick(this)">
		<span class="text">VICELAND</span>
	</div>
</div>

Or ce que vous souhaitez est en créer plusieurs. Nous allons donc créer la liste exacte des données sur lesquels vous allez boucler et les insérer dans .wrapper avec une boucle.

Ce qui donne :

	// Cibler l'élément parent qui va contenir la liste d'élément.
var elWrapper = document.getElementsByClassName('wrapper')[0],

	// Créer les données nécessaire à la liste
	channels = [{
		class: 'viceland',
		name: 'VICELAND'
	}, {
		class: 'rmc-sport',
		name: 'RMC SPORT'
	}, {
		class: 'lci',
		name: 'LCI'
	}, {
		class: 'vision-tv',
		name: 'Vision TV'
	}],

	// Déclaration de variable
	item;

// Pour chaque élément dans `channels`
channels.forEach(function (data) {

	// Créer un élément
	item = document.createElement("div");

	// Créer des attributs à cet élément
	item.id = 'channel-viceland';
	item.classList.add('img-wrapper');

	// Remplir l'élément avec du contenu HTML
	item.innerHTML = '<img id="channel-' + data.class + '-img"'
		+ ' class="video"'
		+ ' src="./images-et-video/' + data.class + '.jpg"'
		+ ' onload="this.onload = null; this.src = getImages(\'' + data.class + '\');"'
		+ ' onclick="onClick(this)" class="w3-hover-opacity">'
		+ '<span class="text">' + data.name + '</span>';

	// Insérer l'élément dans la cible parent
	elWrapper.appendChild(item);
});

toujours avec :

HTML :

<div class="wrapper"></div>

Résultat :

<div class="wrapper"><div id="channel-viceland" class="img-wrapper"><img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload = null; this.src = getImages('viceland');" onclick="onClick(this)"><span class="text">VICELAND</span></div><div id="channel-viceland" class="img-wrapper"><img id="channel-rmc-sport-img" class="video" src="./images-et-video/rmc-sport.jpg" onload="this.onload = null; this.src = getImages('rmc-sport');" onclick="onClick(this)"><span class="text">RMC SPORT</span></div><div id="channel-viceland" class="img-wrapper"><img id="channel-lci-img" class="video" src="./images-et-video/lci.jpg" onload="this.onload = null; this.src = getImages('lci');" onclick="onClick(this)"><span class="text">LCI</span></div><div id="channel-viceland" class="img-wrapper"><img id="channel-vision-tv-img" class="video" src="./images-et-video/vision-tv.jpg" onload="this.onload = null; this.src = getImages('vision-tv');" onclick="onClick(this)"><span class="text">Vision TV</span></div></div>

Résultat (mis en forme) :

<div class="wrapper">
	<div id="channel-viceland" class="img-wrapper">
		<img id="channel-viceland-img"
			class="video"
			src="./images-et-video/viceland.jpg"
			onload="this.onload = null; this.src = getImages('viceland');"
			onclick="onClick(this)">
		<span class="text">VICELAND</span>
	</div>
	<div id="channel-viceland" class="img-wrapper">
		<img id="channel-rmc-sport-img"
			class="video"
			src="./images-et-video/rmc-sport.jpg"
			onload="this.onload = null; this.src = getImages('rmc-sport');"
			onclick="onClick(this)">
		<span class="text">RMC SPORT</span>
	</div>
	<div id="channel-viceland" class="img-wrapper">
		<img id="channel-lci-img"
			class="video"
			src="./images-et-video/lci.jpg"
			onload="this.onload = null; this.src = getImages('lci');"
			onclick="onClick(this)">
		<span class="text">LCI</span>
	</div>
	<div id="channel-viceland" class="img-wrapper">
		<img id="channel-vision-tv-img"
			class="video"
			src="./images-et-video/vision-tv.jpg"
			onload="this.onload = null; this.src = getImages('vision-tv');"
			onclick="onClick(this)">
		<span class="text">Vision TV</span>
	</div>
</div>

Je vous laisse augmenter la liste à votre convenance.

1 « J'aime »
#3

@Haeresis Merci beaucoup mais la modal ne marche plus ?

#4

@Haeresis c’est bon merci beaucoup pour t’on aide

#5

@Haeresis C’est du JSON c’est ça ?

Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s