IE8 -> querySelectorAll

Version imprimable

24/01/2014, 15h59
Nico1131

IE8 -> querySelectorAll

Bonjour à tous,

Ce que je souhaite faire est de récupérer les "checkboxes" dont la classe est ".ww99" et les décocher.

Vu que je travail sous IE8 j'utilise donc la fonction querySelectorAll.

Tout ce passait bien lorsque je testais la fonction sous un éditeur en ligne :
http://codepen.io/anon/pen/dKaJl

Mais quand j'ai voulu le tester moi même sous le navigateur plus rien ne marchait :?

J'ai testé avec et sans le mode "Affichage de compatibilité" de IE mais sans résultat.

Je suis preneur de toutes remarques ;)
24/01/2014, 16h33
Bovino

Mets un doctype correct dans ta page HTML...
24/01/2014, 16h39
Nico1131
Heu tu entend par quoi dans "bon" doctype ?...dans ma page de test j'ai juste mis <!DOCTYPE html>.

Après dans le projet réel sur lequel je travail depuis peut il y a ça :
Code:

1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
NB: Le projet n'est pas en HTML5.
24/01/2014, 16h55
Bovino

Bah... moi je dis ça parce que vus les éléments que tu donnes, c'est la cause la plus probable : ça marche sur l'éditeur en ligne parce que le doctype correspond, ça ne marche pas en local parce que le doctype n'est pas bon et que IE passe en mode de compatibilité (ce que semble confirmer ta phrase 'J'ai testé avec et sans le mode "Affichage de compatibilité"').

Mais vu que tu ne nous montres que ce qui marche, ça rend compliqué de voir pourquoi autre chose ne marche pas ! :aie:
24/01/2014, 17h00
Nico1131

:mouarf: oui c'est sur mais difficile de montrer ce qui ne marche pas sachant que dans les 2 cas c'est exactement le même code.
24/01/2014, 17h06
Bovino

:nono:

Ca, c'est pas possible : deux codes strictement identiques produiront invariablement un résultat identique. Si ce n'est pas le cas, c'est que le code n'est pas identique, notamment au niveau du codage des pages (UTF-8 vs ISO, BOM ou pas BOM, etc.) mais il y a forcément une différence soit sur le fichier, soit dans l'environnement qui l'exécute.

Ben pourtant si c'est le même code :/
Voici ce que j'ai sur ma page de test, exactement la même chose que j'ai mis sur l'éditeur en ligne.

Après l'environnement (Windows Xp), ben je code sur notepad++ et je test sous IE8 et même Firefox qui donnent aucun résultat contrairement à l'éditeur en ligne :?

Après peut être que l'éditeur en ligne inclus des choses directement sans que j'y ai fait attention, donc je sais pas trop :?

Code:

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
<!DOCTYPE html>
<html>
<head>
   <meta charset=utf-8>
   <title>Ici il faut mettre un titre</title>
</head>
<body>
 
<div class="containerCombo">
    <input type="text" class="resultat">
    <input type="button" value="Afficher">
    <ul class="containerElCombo">
        <li class="elementCombo">
            <input type="checkbox" class="ww99" checked>
            <label>Tout</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Lundi</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Mardi</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Mercredi</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Jeudi</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Vendredi</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Samedi</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>Dimanche</label>
        </li>
    </ul>
</div>
 
<div class="containerCombo">
    <input type="text" class="resultat">
    <input type="button" value="Afficher">
    <ul class="containerElCombo">
        <li class="elementCombo">
            <input type="checkbox" class="ww99" checked>
            <label>Tout</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>01</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>02</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>03</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>04</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>05</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>06</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>07</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>08</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>09</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>10</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>11</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>12</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>13</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>14</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>15</label>
        </li>
        <li class="elementCombo">
            <input type="checkbox">
            <label>16</label>
        </li>
    </ul>
</div>
</body>
</html>

Code:

1
2
3
4
5
6
var importants = document.querySelectorAll(".ww99");
 
	 for (var i = 0; i < importants.length; i++) {
		 alert(importants[i]);
		 importants[i].checked = false;
	 }

27/01/2014, 11h11
Watilin

Je ne vois pas de balise <script> dans ton code HTML…
27/01/2014, 11h13
Nico1131

Normal, j'ai séparé ici les 2 langages pour que ce soit plus clair, sinon la balise y est. ;)
27/01/2014, 11h26
Nico1131

J'ai trouvé !

Le problème venait du fait que j'ai mis mon code JS dans le head, du coup je l'ai mis juste avant la fermeture du body et tout marche très bien.

Merci pour votre aides. :ccool: