Incrémentation d'ID querySelectorAll [i + 1]

**yenaulrik** · 05/12/2019, 08h46

Bonjour à tous,
voici mon soucis , je fais un petit carrousel et je teste plusieurs façons, , puis je fais une

ici j'ai fait une liste d'image dans une balise que je retrouve grâce à un querySelectorAll
au début du programme les images sont mises en 'display : none' sauf la première de ma liste
j'active un setInterval pour 'toggle' la classe 'display : none' de l'image qui est visible et en même temps je 'toggle' l'image suivante pour la faire apparaître
mon problème ici c'est que pour l'image suivante on me dit qu'elle n'est pas déclarée

voici à quoi ressemble mon code :
html

Code html :

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

1
2
3
4
5
6
7
8
<div id="slider" class="display_none">
        <img src="images/1.jpg" alt="" title="bonjour">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
    </div>

Javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const TAB_IMG = document.querySelectorAll('#slider img')
const TAB_IMG_LENGTH = TAB_IMG.length
const ACTIVE_SLIDER = document.querySelector('#slider')
 
function set_display_none(){
    for( let i = 1 ; i < TAB_IMG_LENGTH ; i++){
        TAB_IMG[i].classList.toggle('display_none')
    }
    ACTIVE_SLIDER.classList.toggle('display_none')
    console.log('image chargés')
}
 
function play(){
 
    for(let i = 0 ; i < TAB_IMG_LENGTH -1 ; ++i){
        if(!TAB_IMG[i].classList.contains('display_none')){
 
            if(i == TAB_IMG_LENGTH-1){
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[0].classList.toggle('display_none')
            }else{
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[i+1].classList.toggle('display_none')
            }
        }    
 
    }
}
 
timerID = window.setInterval(play, 1000);
 
document.addEventListener('DOMContentLoaded', function(){
    set_display_none()
})

Voilà et c'est les TAB_IMG[i+1] qu'il n'accepte pas, alors que TAB_IMG est bien un tableau qui contient les positions des 6 images donc qui va de 0 à 5 si je ne me trompe pas.

**javatwister** · 05/12/2019, 08h54

Bonjour,

provisoirement, tente

Code :

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

for(let i = 0 ; i < TAB_IMG_LENGTH -1 ; ++i){

**yenaulrik** · 05/12/2019, 08h57

J'ai corrigé un morceau d'ailleurs , j'avais mal mis le play()

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
for(let i = 0 ; i < TAB_IMG_LENGTH -1 ; ++i){
        if(!TAB_IMG[i].classList.contains('display_none')){
 
            if(i == TAB_IMG_LENGTH-1){
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[0].classList.toggle('display_none')
            }else{
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[i+1].classList.toggle('display_none')
            }
        }    
 
    }

Bon, en faisant ça, ça m'a viré l'erreur du coup ^^
si vous voulez voir le code entier :
html

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
15
16
17
18
19
20
21
<body>
    <h1>Sliders</h1>
    <p><a href="#" id="toolbar-toggle">Barre d\'outils</a></p>
    <div class="toolbar display_none">
        <ul>  
            <li id="slider-previous"><i class="fas fa-backward"></i></li>
            <li id="slider-toggle"><i class="fas fa-pause"></i></li>
            <li id="slider-next"><i class="fas fa-forward"></i></li>
            <li id="slider-random"><i class="fas fa-random"></i></li>
        </ul>
    </div>
    <div id="slider" class="display_none">
        <img src="images/1.jpg" alt="" title="bonjour">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
    </div>
    <script type="text/javascript" src="js/slider.js"></script>
</body>

Javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
'use strict';   // Mode strict du JavaScript
 
/*************************************************************************************************/
/* ****************************************** DONNEES ****************************************** */
/*************************************************************************************************/
const ACTIVE_TOOLBAR = document.querySelector('#toolbar-toggle')
const TOOLBAR = document.querySelector('.toolbar')
const ACTIVE_SLIDER = document.querySelector('#slider')
const TAB_IMG = document.querySelectorAll('#slider img')
const button_previous = document.querySelector('#slider-previous')
const button_toggle = document.querySelector('#slider-toggle')
const button_PLAY_PAUSE = document.querySelector('#slider-toggle i')
const button_next = document.querySelector('#slider-next')
const button_random = document.querySelector('#slider-random')
let timerID
const TAB_IMG_LENGTH = TAB_IMG.length
const TIME = 1000
 
let table_img
 
 
 
let bouton = 'play';
/*************************************************************************************************/
/* ***************************************** FONCTIONS ***************************************** */
/*************************************************************************************************/
console.log(TAB_IMG)
 
 
// set images display none
function set_display_none(){
    for( let i = 1 ; i < TAB_IMG_LENGTH ; i++){
        TAB_IMG[i].classList.toggle('display_none')
    }
    ACTIVE_SLIDER.classList.toggle('display_none')
    console.log('image chargés')
}
 
// play classic
 
function switch_play_pause(){
    if(bouton == 'play'){
        bouton = 'pause'
        button_PLAY_PAUSE.classList.toggle('fa-play')
        button_PLAY_PAUSE.classList.toggle('fa-pause')
 
    }else{
        bouton = 'play'
        button_PLAY_PAUSE.classList.toggle('fa-play')
        button_PLAY_PAUSE.classList.toggle('fa-pause')
        timerID = window.setInterval(choix, 1000);
    }
    if(timerID == undefined && bouton == 'pause'){
        timerID = window.setInterval(choix, 1000);
    }
}
 
function play(){
       if(timerID == undefined){
        timerID = window.setInterval(choix, 1000);
    } 
    console.log('-- play --')
 
    for(let i = 0 ; i < TAB_IMG_LENGTH -1 ; ++i){
        if(!TAB_IMG[i].classList.contains('display_none')){
 
            if(i == TAB_IMG_LENGTH-1){
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[0].classList.toggle('display_none')
            }else{
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[i+1].classList.toggle('display_none')
            }
        }    
 
    }
}
 
function pause(){
    console.log('-- pause --')
    timerID = window.clearInterval(timerID);
}
 
function previous(){
    console.log('-- previous --')
    timerID = window.clearInterval(timerID);
    console.log(timerID)
 
    if(button_PLAY_PAUSE.classList.contains('fa-pause')){ // onverifie le bouton play
        button_PLAY_PAUSE.classList.toggle('fa-play')
        button_PLAY_PAUSE.classList.toggle('fa-pause')
        bouton = 'pause'
    }
    for(let i = 0 ; i < TAB_IMG_LENGTH ; i++){
        if(i == 0){
            if(!TAB_IMG[i].classList.contains('display_none')){
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[TAB_IMG_LENGTH - 1].classList.toggle('display_none')
            }
        }else{
            if(!TAB_IMG[i].classList.contains('display_none')){
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[i-1].classList.toggle('display_none')
            }
        }
 
 
    }
 
}
function next(){
    console.log('-- next --')
 
}
function random(){
    console.log('-- random --')
}
 
function choix(){
    switch(bouton){
        case 'play' : play() ;
        break ;
        case 'pause' : pause() ; 
        break ;
        case 'random' : random() ; 
        break ;
    }
} 
 
timerID = window.setInterval(choix, TIME);
 
function showToolbar(){
    TOOLBAR.classList.toggle('display_none')
} 
 
/*************************************************************************************************/
/* ************************************** CODE PRINCIPAL *************************************** */
/*************************************************************************************************/
 
document.addEventListener('DOMContentLoaded', function(){
    set_display_none()
     ACTIVE_TOOLBAR.addEventListener('click', showToolbar)
    button_toggle.addEventListener('click', switch_play_pause)
    button_previous.addEventListener('click', previous)
    button_next.addEventListener('click', function(){bouton = 'next'})
    button_random.addEventListener('click', function(){bouton = 'random'}) 
})

Invité · 05/12/2019, 09h09

Bonjour,

tu peux étudier le code donné ici : Make a Simple JavaScript Slideshow without jQuery

currentSlide = (currentSlide+1)%slides.length; : l'astuce est d'utiliser le MODULO.
et au lieu d'appliquer une classe 'display_none' sur tous les éléments masqués, on applique une classe "showing" sur l'élément affiché !

**yenaulrik** · 05/12/2019, 09h15

C'est vrai que vu comme ça

c'est beaucoup moins prise de tête que se que je faisais !
Mais ça part en hors sujet je devrais renommer le titre de la discussion ^^

Merci beaucoup !

Incrémentation d'ID querySelectorAll [i + 1]

JavaScript

Discussions similaires

Partager

Partager