Boucle JavaScript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
maxime95
Messages : 3
Enregistré le : 27 févr. 2019, 14:57

Boucle JavaScript

Message par maxime95 » 27 févr. 2019, 15:00

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

Code : Tout sélectionner

<!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>

Avatar du membre
webmaster
Administrateur du site
Messages : 70
Enregistré le : 28 févr. 2017, 15:19

Re: Boucle JavaScript

Message par webmaster » 27 févr. 2019, 16:38

Bonjour

Je n'ai pas compris l'objectif de la boucle
Il manque aussi le contenu du fichier .js
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

maxime95
Messages : 3
Enregistré le : 27 févr. 2019, 14:57

Re: Boucle JavaScript

Message par maxime95 » 27 févr. 2019, 16:43

La boucle me servirai a éviter une plein de div a chaque fois c'est pour cela que je voudrais faire une boucle.


Code : Tout sélectionner

//-- Fonction quand je clics sur une image sa m'ouvre une modal --//
		function onClick(element) {
	  		document.getElementById("videoid").src = element.src;
	  		document.getElementById("modal").style.display = "block";
	  		
		}


		function getImages(channel) {
			return "./images-et-video/" + channel + ".jpg" ;
		}
		//-- Fonction quand je clics juste autour de ma modal ma modal se ferme --//
		window.onclick = function(event) {
  			if (event.target == modal) {
    		modal.style.display = "none";
  			}
		}

Avatar du membre
webmaster
Administrateur du site
Messages : 70
Enregistré le : 28 févr. 2017, 15:19

Re: Boucle JavaScript

Message par webmaster » 28 févr. 2019, 10:19

Désolé, mais je ne vois pas en quoi une boucle JS "éviterait plein de divs a chaque fois"

D'ailleurs en quoi est-ce gênant d'avoir des divs ? On ne peut pas faire autrement

Je pense comprendre que la boucle servirait à créer les onclick sur les images ?
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

maxime95
Messages : 3
Enregistré le : 27 févr. 2019, 14:57

Re: Boucle JavaScript

Message par maxime95 » 11 mars 2019, 17:24

c'est bon j'ai trouvé merci quand même

Répondre