Boucle for sur les éléments saute 1 item

**patricktoulon** · 06/03/2018, 13h21

Bonjour a tous
un truc qui me rend dingue et j'ai beau controler lettre par lettre le code je ne vois pas l'erreur surtout qu'elle est insensée
j'ai une boucle qui boucle sur tout les element de la classe "slide" et je ne sais pourquoi elle saute celui du milieu
j'ai verifier le code html il est bon
le code de la boucle est tellement simple que je ne vois pas ou peut etre cette erreur mais elle est bien dans cette boucle
j'ai mis des console.log pour verifier

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
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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
#conteneur >*{
        user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
}
.fondd1 {
 border: 1px solid rgb(240, 240, 240);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
 margin-top: 5px;
}
 
.fondd2 {
 border: 1px solid rgb(250,250,250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
        margin-top: 5px;
}
.fondd1 > div {
 background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
}
 
.fondd2 > div {
 background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
}
 
 
 
 .fondg1 {
 border: 1px solid rgb(245, 245, 245);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
  margin-top: 5px;
}
.fondg2 {
 border: 1px solid rgb(250,250,250);
 border-radius: 10px;
 background: linear-gradient(to bottom, rgba(255,255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
 box-shadow: 0 0 1em #BDBDBD inset;
        margin-top: 5px;
}
.fondg1 > div {
 box-shadow: 0 0 1em #58D3F7 inset;
        background-color:rgb(245, 245, 245);
      
}
.fondg2 > div {
 box-shadow: 0 0 1em #6E6E6E inset;
        background-color:rgb(245, 245, 245);
}
 
.slide{
     margin-top:5px;
     border:1px solid rgb(240,240,240);
}
 
.slide > div{
       border:1px solid rgb(230,230,230);
}
 
</style>
<script  type= "text/javascript">
var LrG;
var Crs;
var oX;
var newX;
var Mx;
var Dv;
var dragg;
function Start(event) {
 console.log(event.target.id);
 Crs = event.target;
 dragg = Crs.parentElement;
 dragg.className=dragg.getAttribute("cl2");
          LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
 Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
 oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 Mx = oX - Crs.offsetLeft;
 dragg.addEventListener("mousemove", dragging, false);
 dragg.addEventListener("mouseup", relache, false);
 dragg.addEventListener("mouseleave", relache, false);
}
function dragging(event) {
 newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
 console.log("deplacement " + newX);
 var posX = newX - Mx;
 if (posX < 0) {
  posX = 0;
 }
 if (posX > LrG - (Crs.offsetWidth / 2)) {
  posX = LrG - (Crs.offsetWidth / 2);
 }
 Crs.style.position = "absolute";
 Crs.style.left = posX + "px";
 document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
}
function relache(event) {
 console.log(Crs.id);
 dragg.removeEventListener("mousemove", dragging);
 dragg.removeEventListener("mouseup", relache);
 dragg.removeEventListener("mouseleave", relache);
        dragg.className=dragg.getAttribute("cl1");
       }
function ajoute() {
 var messlides = document.getElementsByClassName("slide");
        console.log("attribution de l'evenement down"); 
          for (var i = 0; i < messlides.length; i++) {
     messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
            console.log("slider : " + messlides[i].id);
                   console.log ("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                   messlides[i].className=messlides[i].getAttribute("cl1");
          }
}
 
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
      des slides pas comme les autres 
      <p id ="res">position</p>
      <br/><br/>
 
 
      <div id="fond5"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs5" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
      <div id="fond6"  class="slide"  cl1="fondd1" cl2="fondd2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs6" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
      </div>
 
      <div id="fond7"  class="slide"  cl1="fondg1" cl2="fondg2" style="position:relative;width:300px;height:26px;overflow:none;" >
         <div id="Crs7" class="cur" style="position:absolute;top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
      </div>
</div>
 <script> ajoute();</script>  
</body>
</html>

dans la capture ci dessous on vois bien que le fond6 avec son curseur crs6 n'est pas listé
Nom : Capture.JPG
Affichages : 440
Taille : 70,6 Ko

**Beginner.** · 06/03/2018, 14h08

Salut,

C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...

**Beginner.** · 06/03/2018, 14h14

Quand tu fais var messlides = document.getElementsByClassName("slide"); tu obtiens une nodeLisit qui peut changer (qui est actualisée en fonction des changements) et notamment sa taille peut changer, elle vaut 3 au début ensuite tu modifies les choses avec messlides[i].className = messlides[i].getAttribute("cl1"); après cette instruction la taille de messlides passe à 2 puisque tu as modifié la class (l'élement n'a du coup plus la class "slider" et alors il ne reste plus que deux élèments avec la class "slider" ce qui fausse le reste de ton code...

EDIT : Ah je viens de voir la réponse de NoSmoKing qui explique aussi les choses...

Sinon je ne comprends pas pourquoi tu n'utilises pas les méthodes équivalentes à celle de classList proposés par psychadelic au lieu d'utiliser ces attributs...

Envoyé par NoSmoking

tout à fait, pas suivi cette discussion de Patrick :oops:

Ça lui fait une explication supplémentaire...

**Beginner.** · 06/03/2018, 14h46

Sinon tu pouvais aussi utiliser la class "cur" :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
function ajoute() {
            var messlides = document.getElementsByClassName("cur");
            console.log("attribution de l'evenement down");
            for (var i = 0; i < messlides.length; i++) {
                messlides[i].addEventListener("mousedown", Start, false);
                console.log("slider : " + messlides[i].parentElement.id);
                console.log("curseur : " + messlides[i].id);
                messlides[i].parentElement.className = messlides[i].parentElement.getAttribute("cl1");
            }
        }

**psychadelic** · 06/03/2018, 15h41

Désolé, mais je ne peux pas utiliser ton systeme avec des faux attributs CL1 et CL2

Je trouve aussi que c'est une mauvaise idée, parce que je fais pas mal de TMA, et on préfère tous que le code suive des "standards", car les multiples astuces rendent fou ceux qui font de la maintenance.

donc, voici - à mon sens - comment tu devrai coder tes slider:

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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
                #conteneur * {                  /*---- petite erreur, ici ne pas mettre de sélecteur direct,  ( #conteneur>* ) --------------*/
                        user-select: none;
                        -moz-user-select: none;
                        -webkit-user-select: none;
                }
                .slide {
                        position:relative;
                        overflow:hidden;          /* la valeur "none" n'existe pas cet attribut */
                        margin-top: 5px;
                        border: 1px solid rgb(240, 240, 240);
                }
 
                .slide>div {
                        position:absolute;
                        border: 1px solid rgb(230, 230, 230);
                }
 
                #fond5, #fond6 {
                        border: 1px solid rgb(240, 240, 240);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(220, 220, 220, 0) 44%, rgba(33, 180, 226, 1) 53%, rgba(220, 220, 220, 0) 63%);
                        margin-top: 5px;
                }
                #fond5>div , #fond6>div {
                        background: linear-gradient(to bottom, rgba(220, 227, 145, 0.1) 0%, rgba(97, 196, 25, 1) 50%, rgba(180, 227, 145, 1) 100%);
                }
 
                #fond5.ModActif, #fond6.ModActif {
                        border: 1px solid rgb(250, 250, 250);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 255, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em #BDBDBD inset;
                        margin-top: 5px;
                }
                #fond5.ModActif>div, #fond6.ModActif>div {
                        background: linear-gradient(to bottom, rgba(240, 240, 0, 1) 0%, rgba(255, 50, 0, 1) 50%, rgba(240, 240, 0, 1) 100%);
                }
 
 
                #fond7 {
                        border: 1px solid rgb(245, 245, 245);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 44%, rgba(0, 255, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        margin-top: 5px;
                }
 
                #fond7>div {
                        box-shadow: 0 0 1em #58D3F7 inset;
                        background-color: rgb(245, 245, 245);
 
                }
 
                #fond7.ModActif {
                        border: 1px solid rgb(250, 250, 250);
                        border-radius: 10px;
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 44%, rgba(255, 0, 0, 1) 53%, rgba(255, 255, 255, 1) 63%);
                        box-shadow: 0 0 1em #BDBDBD inset;
                        margin-top: 5px;
                }
 
                #fond7.ModActif>div {
                        box-shadow: 0 0 1em #6E6E6E inset;
                        background-color: rgb(245, 245, 245);
                }
 
 
        </style>
	<script type="text/javascript">
                var LrG;
                var Crs;
                var oX;
                var newX;
                var Mx;
                var Dv;
                var dragg;
 
                function Start(event) {
                        console.log(event.target.id);
                        Crs = event.target;
                        dragg = Crs.parentElement;
                        // dragg.className = dragg.getAttribute("cl2");
                        addClass(dragg, "ModActif");
                        LrG = Crs.parentElement.offsetWidth - (Crs.offsetWidth / 2);
                        Dv = (LrG - (Crs.offsetWidth / 2)) / 100;
                        oX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                        Mx = oX - Crs.offsetLeft;
                        dragg.addEventListener("mousemove", dragging, false);
                        dragg.addEventListener("mouseup", relache, false);
                        dragg.addEventListener("mouseleave", relache, false);
                }
 
                function dragging(event) {
                        newX = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
                        console.log("deplacement " + newX);
                        var posX = newX - Mx;
                        if (posX < 0) {
                                posX = 0;
                        }
                        if (posX > LrG - (Crs.offsetWidth / 2)) {
                                posX = LrG - (Crs.offsetWidth / 2);
                        }
                        Crs.style.position = "absolute";
                        Crs.style.left = posX + "px";
                        document.getElementById("res").innerHTML = Crs.id + " : " + Math.round(Crs.offsetLeft / Dv);
                }
 
                function relache(event) {
                        console.log(Crs.id);
                        dragg.removeEventListener("mousemove", dragging);
                        dragg.removeEventListener("mouseup", relache);
                        dragg.removeEventListener("mouseleave", relache);
                        //dragg.className = dragg.getAttribute("cl1");
                        removeClass(dragg, "ModActif");
                }
 
                function ajoute() {
                        var messlides = document.getElementsByClassName("slide");
                        console.log("attribution de l'evenement down");
                        for (var i = 0; i < messlides.length; i++) {
                                messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false);
                                console.log("slider : " + messlides[i].id);
                                console.log("curseur : " + messlides[i].getElementsByTagName("DIV")[0].id);
                        }
                }
 
 
                /* fonctions de substitution sur l'ajout / suppression de Classe pour les anciennes versin de JS */
                        function hasClass(el, className) {
                                return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
                        }
                        function addClass(el, className) {
                                if (!hasClass(el, className))
                                        el.className += " " + className;
                        }
                        function removeClass(el, className) {
                                if (hasClass(el, className)) {
                                        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
                                        el.className = el.className.replace(reg, ' ');
                                }
                        }
                /* */
 
        </script>
 
</head>
 
<body>
	<div id="conteneur1" style="position:absolute;height:200px;left:28px;width:350px;border:2 solid red;">
		des slides pas comme les autres
		<p id="res">position</p>
		<br/>
		<br/>
 
 
		<div id="fond5" class="slide" style="width:300px;height:26px;">
			<div id="Crs5" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
		</div>
		<div id="fond6" class="slide" style="width:300px;height:26px;">
			<div id="Crs6" class="cur" style="top:1px;width:26px;height:26px;border-radius:8px;" unselectable="on"></div>
		</div>
 
		<div id="fond7" class="slide" style="width:300px;height:26px;">
			<div id="Crs7" class="cur" style="top:1px;width:26px;height:26px;border-radius:50%;" unselectable="on"></div>
		</div>
	</div>
	<script>
                ajoute();
        </script>
</body>
</html>

**Beginner.** · 06/03/2018, 16h35

Je remplacerais aussi messlides[i].getElementsByTagName("DIV")[0].addEventListener("mousedown", Start, false); par messlides[i].firstChild.addEventListener("mousedown", Start, false);... Même si cela ne joue pas beaucoup...

**NoSmoking** · 06/03/2018, 14h12

Bonjour,
cela tiens à la méthode utilisée, à savoir getElementsByClassName qui retourne une NodeList dynamique ce qui veut dire que toute modification effectuée sur un de ses éléments est prise en compte et la liste est mise à jour.

Comme plus loin dans ton code tu modifies la className des éléments celui en cours de traitement est retiré de la NodeList et de ce fait l'élément en position 2 passe en position 1. Comme le compteur i est incrémenté cet élément est ignoré.

Remplace la méthode getElementsByClassName par querySelectorAll(".slide") qui elle renvoie un NodeList statique.

[EDIT]

C'est normal, tu n'as pas tenu compte de la remarque de Watilin au message #7...

tout à fait, pas suivi cette discussion de Patrick

[ReEDIT]
Remplacement du terme listNode en NodeList pour respecter la littérature.

Boucle for sur les éléments saute 1 item

JavaScript

Vue hybride

Discussions similaires

Partager

Partager