Boucle sur des div

Maxime KERBRAT
Javascript

Bonjour, je cherche à faire une boucles pour mes div

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

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

Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses

Pierrot01

c'est pas très clair :D :D

    document.querySelectorAll('.img-wrapper').forEach(function(el) {
                                        console.log(el);
    });

un truc comme ça devrait fonctionner ;)

@pluche

Pierre

Maxime KERBRAT
Auteur

Mais comment faire pour que dans mon code je puisse enlever toute ces div mais grace au js pouvoir boucler la div et avoir le même resultats . @Pierrot01

Pierrot01

a vrai dire, j'comprend pas la question :D
té pas très clair :D

@plus

Pierre