Test de js sous IE

Version imprimable

Test de js sous IE

bonjour,

je vous donne d'abord mes codes avant de vous expliquer mon souci:

html:

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
<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="css/styles/calculette.css">
			<meta content="text/html; charset=utf-8">
			<script type="text/js" src="js/calculette.js"></script>
		</head>
		<body>
	         <div id="affiche"></div>
 
	    <button class="line3 c1" id="sept" onclick="sept ()">7</button>
	    <button class="line3 c2" id="huit" onclick="huit ()">8</button>
	    <button class="line3 c3" id="neuf" onclick="neuf ()">9</button>
	    <span class="apart"></span>
	    <button class="line3 c4" id="mul" data-op="Setmul" onclick="mul ()">*</button>
 
 
 
	    <button class="line2 c1" id="quatre" onclick="quatre ()">4</button>
	    <button class="line2 c2" id="cinq" onclick="cinq ()">5</button>
	    <button class="line2 c3" id="six" onclick="six ()">6</button>
	    <span class="apart"></span>
	    <button class="line2 c4" id="sub" data-op="Setsub" onclick="sub ()">-</button>
 
 
 
	    <button class="line1 c1" id="un" onclick="un ()">1</button>
	    <button class="line1 c2" id="deux" onclick="deux ()">2</button>
	    <button class="line1 c3" id="trois" onclick="trois ()">3</button>
	    <span class="apart"></span>
	    <button class="line1 c4" id="div" data-op="Setdiv" onclick="div ()">/</button>
 
 
 
	    <button class="line0 c1" id="point" onclick="point ()">.</button>
	    <button class="line0 c2" id="zero" onclick="zero ()">0</button>
	    <button class="line0 c3" id="egal" onclick="egal ()">=</button>
	    <span class="apart"></span>
	    <button class="line0 c4" id="add" data-op="Setadd" onclick="add ()">+</button>
 
 
 
	    <button class="line4 c1" id="c" onclick="c ()">C</button>
	    <button class="line4 c2" id="par" onclick="par ()">()</button><!-- 
	    <button class="line4 c3" id="egal" onclick="egal ()">=</button>
	    <span class="apart"></span>
	    <button class="line4 c4" id="add" data-op="Setadd" onclick="add ()">+</button> -->
 
	   </body>
	</html>

css:

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
body {
	padding-top: 10px;
	width: 210px;
	background-color: #aaaaaa;
	border: 2px solid black;
	height: 300px;
}
button {
	width: 40px;
	height: 40px;
	margin: 2.5px;
}
* {
	margin: 0px;	
}
.c1 {
	margin-left: 10px;
}
.c4 {
	margin-right: 10px;
	font-weight: bold;
}
.line4 {
	margin-bottom: 10px;
}
.line3 {
	margin-top: 10px;
}
.apart {
	width: 20px;
	height: 40px;
}
#affiche {
	width: 175px;
	height: 20px;
	border: 1px solid black;
	margin: 10px; 
	border-radius: 2px;
	background-color: green;
}
.line1,.line2,.line3,.line4,.line0 {
	display: inline-block;
}

js:

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
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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
console.log("ttt"):
 
    var par = false;
 
    var cacul = document.getElementById ('affiche');
 
    function pars () {
 
    	if (par) {
    		calcul.innerHTML += ')';
    		par = false;
    	}
 
    	else {
    		calcul.innerHTML += '(';
    		par = true;
    	}
 
	}
 
	function zero () {
 
    		calcul.innerHTML += '0';
 
	}
 
	function un () {
 
    		calcul.innerHTML += '1';
 
	}
 
	function deux () {
 
    		calcul.innerHTML += '2';
 
	}
 
	function trois () {
 
    		calcul.innerHTML += '3';
 
	}
 
	function quatre () {
 
    		calcul.innerHTML += '4';
 
	}
 
	function cinq () {
 
    		calcul.innerHTML += '5';
 
	}
 
	function six () {
 
    		calcul.innerHTML += '6';
 
	}
 
	function sept () {
 
    		calcul.innerHTML += '7';
 
	}
 
	function zero () {
 
    		calcul.innerHTML += '8';
 
	}
 
	function neuf () {
 
    		calcul.innerHTML += '9';
 
	}
 
 
 
/*
 
     var operation = {
 
         add : false,
 
         div : false,
 
         sub : false,
 
         mul : false,
 
         Setadd: function (val) {  
 
                  this.add = val; 
 
                  this.Setdiv (false);
 
                  this.Setsub (false);
 
                  this.Setmul (false);
 
                  calcul1 = affiche.html() + '+';
 
                  affiche.html('') },
 
           Setdiv: function (val) {  
 
                  this.div = val; 
 
                  this.Setadd (false);
 
                  this.Setsub (false);
 
                  this.Setmul (false);
 
                  calcul1 = affiche.html()  + '/';
 
                  affiche.html(''); },
 
          Setsub: function (val) {  
 
                  this.sub = val; 
 
                  this.Setdiv (false);
 
                  this.Setadd (false);
 
                  this.Setmul (false);
 
                  calcul1 = affiche.html()  + '-';
 
                  affiche.html(''); },
 
          Setmul: function (val) {  
 
                  this.mul = val; 
 
                  this.Setdiv (false);
 
                  this.Setsub (false);
 
                  this.Setadd (false);
 
                  calcul1 = affiche.html() + '*';
 
                  affiche.html(''); }
 
      };
 
 */
 
     $('.line0, .line1, .line2, .line3').css ({
 
          display : 'inline-block'
 
     });
 
 
 
    $(affiche).css ({
 
          backgroundColor : '#339933',
 
          textAlign : 'right',
 
          lineHeight : '20px'
 
     });
 
     $('button').css ({
 
          width : '30px'
 
     });
 
     $('fieldset').css ({
 
         width : '105px',
 
         height : '20px'
 
     });
 
 
 
     $('#zero').click (function () {
 
          affiche.html(affiche.html()+'0');          
 
     });
 
 
 
     $('#zero, #un, #deux, #trois, #quatre, #cinq, #six, #sept, #huit, #neuf, #point, #add, #sub, #mul, #div').click (function () {
 
          affiche.html (  affiche.html()+$(this).text() );          
 
     });
 
 
 
 
 
 
 
     $('#egal').click (function () {
 
          result = eval (affiche.html());        
 
          affiche.html(''); 
 
          $('#result').html (result);
 
     });

ces codes doivent servir à la création d'un gadget, un widget sous windows, ce qui explique la nécessité des onclick. etant donné que c'est pour windows, vous comprenez que je voulais le tester sous ie. mais voilà mon problème : je ne sais pas bien comment marche la console web sous ie. j'ai ouvert mon code sous celui-ci et déjà il s'affiche comme voulu mais les clic sur les différents boutons ne provoque rien, je ne trouve même pas d'erreur dans la console.

pouvez-vous m'aider ?

24/11/2015, 22h34
melka one

jour

il ne doit pas y avoir d'espace entre le nom des fonctions et les accolades

Code:

<button class="line3 c1" id="sept" onclick="sept()">7</button>

Code:

function pars()
25/11/2015, 17h12
aertys

j'ai remplacé tous les

Citation:

()

par des

Citation:

()

mais ien ne change.
25/11/2015, 17h58
NoSmoking
@melka one :

Citation:

il ne doit pas y avoir d'espace entre le nom des fonctions et les accolades

que nenni pas du tout et pour preuve essaie ce bout de code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function bonjour( param ) { alert(' bonjour : ' +param); } bonjour( 'vous !' );
ce n'est évidemment pas une façon d'écrire à reproduire :mrgreen:

@aertys : répété maintes fois sur le forum, il faut attendre que les éléments soient dans l'arbre DOM avant de chercher à les utiliser.
Tu insères ton fichier JS avant que l'élément ne soit créé donc document.getElementById ('affiche'); plante.
28/11/2015, 16h28
aertys

excusez-moi pour cette erreur
je l'ai rectifié mais j'obtiens toujours la même chose
sous firefox, par exemple lorsque j'appuie sur le 7, la console m'affiche :

Citation:

TypeError: sept is not a function

Maintenant il faut passer à la suite du code !

Je n'ai pris que ce qui est visible (en supprimant les lignes vides quand même)
Code:

1 2 3 4 5 6 7 8 console.log("ttt"): var par = false; var cacul = document.getElementById ('affiche'); function pars () { if (par) { calcul.innerHTML += ')'; par = false; }
• ligne #1 il y a un : en fin au lieu d'un ;
• ligne #3 tu initialises une variable cacul
• ligne #6 tu utilises une variable nommée calcul
...
• tu utilises jQuery et tu ne charge même pas la librairie !

corrige déjà tout cela...!

28/11/2015, 19h58
melka one

Citation:

que nenni pas du tout

tout a fait c'est tellement rare de voir les accolades séparé par un espace que pour mois çà aurait créé une erreur.

j'ai rectifie les petits problèmes JS soulignés, mais j'obtiens toujours le même résultat sous ie.
voici mon nouveau code JS :

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
console.log("ttt");
 
    var par = false;
 
    var calcul = document.getElementById ('affiche');
 
    function pars() {
 
    	if (par) {
    		calcul.innerHTML += ')';
    		par = false;
    	}
 
    	else {
    		calcul.innerHTML += '(';
    		par = true;
    	}
 
	}
 
	function zero() {
 
    		calcul.innerHTML += '0';
 
	}
 
	function un() {
 
    		calcul.innerHTML += '1';
 
	}
 
	function deux() {
 
    		calcul.innerHTML += '2';
 
	}
 
	function trois() {
 
    		calcul.innerHTML += '3';
 
	}
 
	function quatre() {
 
    		calcul.innerHTML += '4';
 
	}
 
	function cinq() {
 
    		calcul.innerHTML += '5';
 
	}
 
	function six() {
 
    		calcul.innerHTML += '6';
 
	}
 
	function sept() {
 
    		calcul.innerHTML += '7';
 
	}
 
	function huit() {
 
    		calcul.innerHTML += '8';
 
	}
 
	function neuf() {
 
    		calcul.innerHTML += '9';
 
	}

j'ai finalement réussi, merci de votre aide, maintenant mes boutons marchent. ce qui me pose un problème c'est juste un problème d'affichage : le numéro s'affichant sur un fond vert, il n'est pas très lisible, donc je voudrais le mettre en gras, je sais le faire en JS mais est-ce qu'il est nécessaire de le rajouter dans chaque fonction ? Ma 2ème option est de le faire directement en CSS, mais je doute qu'il soit lu après le JS.

nouveau code html :

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
<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="css/styles/calculette.css">
			<meta content="text/html; charset=utf-8">
		</head>
		<body>
	         <div id="affiche"></div>
 
	    <button class="line3 c1" id="sept" onclick="sept()">7</button>
	    <button class="line3 c2" id="huit" onclick="huit()">8</button>
	    <button class="line3 c3" id="neuf" onclick="neuf()">9</button>
	    <span class="apart"></span>
	    <button class="line3 c4" id="mul" data-op="Setmul" onclick="mul()">*</button>
 
 
 
	    <button class="line2 c1" id="quatre" onclick="quatre()">4</button>
	    <button class="line2 c2" id="cinq" onclick="cinq()">5</button>
	    <button class="line2 c3" id="six" onclick="six()">6</button>
	    <span class="apart"></span>
	    <button class="line2 c4" id="sub" data-op="Setsub" onclick="sub()">-</button>
 
 
 
	    <button class="line1 c1" id="un" onclick="un()">1</button>
	    <button class="line1 c2" id="deux" onclick="deux()">2</button>
	    <button class="line1 c3" id="trois" onclick="trois()">3</button>
	    <span class="apart"></span>
	    <button class="line1 c4" id="div" data-op="Setdiv" onclick="div()">/</button>
 
 
 
	    <button class="line0 c1" id="point" onclick="point()">.</button>
	    <button class="line0 c2" id="zero" onclick="zero()">0</button>
	    <button class="line0 c3" id="egal" onclick="egal()">=</button>
	    <span class="apart"></span>
	    <button class="line0 c4" id="add" data-op="Setadd" onclick="add()">+</button>
 
 
 
	    <button class="line4 c1" id="c" onclick="c()">C</button>
	    <button class="line4 c2" id="par" onclick="par()">()</button><!-- 
	    <button class="line4 c3" id="egal" onclick="egal()">=</button>
	    <span class="apart"></span>
	    <button class="line4 c4" id="add" data-op="Setadd" onclick="add()">+</button> -->
 
			<script type="text/javascript" src="js/calculette.js"></script>
	   </body>
	</html>

29/11/2015, 17h48
aertys

J'ai tout de même essayé vite fait de l'écrire en CSS et mon code marche maintenant parfaitement sous firefox, mais aucun bouton ne fonctionne sous ie.
Savez-vous comment régler ce problème sous ie ?
30/11/2015, 13h51
aertys

en naviguant sur internet j'ai lu qu'il fallait normalement un noeud textuel et ensuite l'insérer dans le dom. est-ce la façon à utiliser sous ie ?
30/11/2015, 19h35
NoSmoking

Citation:

mais aucun bouton ne fonctionne sous ie.

• Commence par activer la console ou mieux supprime la ligne de ton code.
• Ensuite il nous faudrait ton dernier code corrigé des erreurs, pour la plupart d'étourderie, pour ce rendre compte.

voici mon nouveau js, sans erreur sous firefox mais sans résultat sous ie:

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
 
 
    var par = false;
 
    var calcul = document.getElementById ('affiche');
 
    function pars() {
 
    	if (par) {
    		calcul.innerHTML += ')';
    		par = false;
    	}
 
    	else {
    		calcul.innerHTML += '(';
    		par = true;
    	}
 
	}
 
	function zero() {
 
    		calcul.innerText += '0';
 
	}
 
	function un() {
 
    		calcul.innerText += '1';
 
	}
 
	function deux() {
 
    		calcul.innerHTML += '2';
 
	}
 
	function trois() {
 
    		calcul.innerHTML += '3';
 
	}
 
	function quatre() {
 
    		calcul.innerHTML += '4';
 
	}
 
	function cinq() {
 
    		calcul.innerHTML += '5';
 
	}
 
	function six() {
 
    		calcul.innerHTML += '6';
 
	}
 
	function sept() {
 
    		calcul.textContent += '7';
 
	}
 
	function huit() {
 
    		calcul.innerHTML += '8';
 
	}
 
	function neuf() {
 
    		calcul.innerHTML += '9';
 
	}

et comment activer la console sous ie ?

Citation:

sans erreur sous firefox

va donc savoir pourquoi mais je n'y crois pas une seconde :aie:

Cela devient un peu l'anarchie dans ton code, il manque des fonctions comme mul() par exemple, un mélange exotique de innerHTML, textContent, innerText...

Ce que je te propose c'est de créer un fonction générique pour l'ajout d'un caractère dans la zone de résultat
Code:

1 2 3 4 5 var oAffichage = document.getElementById ('affiche'); function addChar( c){ var propText = ('textContent' in oAffichage) ? 'textContent' : 'innerText'; // prise en compte des vieux IE oAffichage[propText] += c; }
maintenant sur tes éléments tu ajoutes l'appel de la fonction
Code:

1 2 3 4 <button class="line3 c1" id="sept" onclick="addChar('7')">7</button> <button class="line3 c2" id="huit" onclick="addChar('8')">8</button> <button class="line3 c3" id="neuf" onclick="addChar('9')">9</button> 
Citation:

et comment activer la console sous ie ?

F12 sauf sur les très vieux IE :aie:

03/12/2015, 16h37
aertys

c'est fait
je l'ai testé : sous ie, sans nouveauté
sous firefox j'obtiens l'erreur suivante :

Citation:

L'encodage de caractères du document HTML n'a pas été déclaré. Le document sera affiché avec des caractères incorrects pour certaines configurations de navigateur si le document contient des caractères en dehors de la plage US-ASCII. L'encodage de caractères de la page doit être déclaré dans le document ou dans le protocole de transfert.
05/12/2015, 19h33
NoSmoking

Si tu n'as pas fait d'erreur, mais on ne sais pas ...pas de code en vue, aucune raison que cela ne marche pas sauf bien sûr si javascript n'est pas activé :mrgreen:

Pour ton 2éme point, mets un <meta charset="UTF-8"> sous ta balise <head>.
06/12/2015, 20h03
aertys

bonsoir

comment activer le JS sous ie ?

a propos de mon code, j"ai fait exactement ce que NoSmoking m'a dit de faire, c'est à dire que j'ai fais pour l'instant simplement un copier-coller du code fourni.
07/12/2015, 15h51
NoSmoking

Citation:

comment activer le JS sous ie ?

c'était plutôt sur le ton de la plaisanterie que j'ai avancé cela mais...

Outils ► Options Internet ► Sécurité Personnaliser le niveau ► Scripts ASP. ► Activer

Citation:

j'ai fais pour l'instant simplement un copier-coller du code fourni

cela risque quand même d'être insuffisant ;)

Citation:

Envoyé par NoSmoking

c'était plutôt sur le ton de la plaisanterie que j'ai avancé cela

c'était déjà activé, mais cela valait le coup d'essayer.
pour mes codes voici déjà le html :

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
<!DOCTYPE html>
 
	<html>
 
		<head>
 
			<link rel="stylesheet" type="text/css" href="css/styles/calculette.css">
			<meta content="text/html; charset=utf-8">
 
		</head>
 
		<body>
 
		 <section>
 
		         <div id="affiche"></div>
 
		    <button class="line3 c1" id="sept" onclick="addChar('7')">7</button>
		    <button class="line3 c2" id="huit" onclick="addChar('8')">8</button>
		    <button class="line3 c3" id="neuf" onclick="addChar('9')">9</button>
		    <span class="apart"></span>
		    <button class="line3 c4" id="mul" data-op="Setmul" onclick="mul()">*</button>
 
 
 
		    <button class="line2 c1" id="quatre" onclick="quatre()">4</button>
		    <button class="line2 c2" id="cinq" onclick="cinq()">5</button>
		    <button class="line2 c3" id="six" onclick="six()">6</button>
		    <span class="apart"></span>
		    <button class="line2 c4" id="sub" data-op="Setsub" onclick="sub()">-</button>
 
 
 
		    <button class="line1 c1" id="un" onclick="un()">1</button>
		    <button class="line1 c2" id="deux" onclick="deux()">2</button>
		    <button class="line1 c3" id="trois" onclick="trois()">3</button>
		    <span class="apart"></span>
		    <button class="line1 c4" id="div" data-op="Setdiv" onclick="div()">/</button>
 
 
 
		    <button class="line0 c1" id="point" onclick="point()">.</button>
		    <button class="line0 c2" id="zero" onclick="zero()">0</button>
		    <button class="line0 c3" id="egal" onclick="egal()">=</button>
		    <span class="apart"></span>
		    <button class="line0 c4" id="add" data-op="Setadd" onclick="add()">+</button>
 
 
 
		    <button class="line4 c1" id="c" onclick="c()">C</button>
		    <button class="line4 c2" id="par" onclick="par()">()</button><!-- 
		    <button class="line4 c3" id="egal" onclick="egal()">=</button>
		    <span class="apart"></span>
		    <button class="line4 c4" id="add" data-op="Setadd" onclick="add()">+</button> -->
 
	    </section>
 
			<script type="text/javascript" src="js/calculette.js"></script>
	   </body>
	</html>

et le JS

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
 
 
    var par = false;
 
    var calcul = document.getElementById ('affiche');
 
	function addChar( c){
 
		var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE 
		calcul [propText] += c;
 
	}
 
    function pars() {
 
    	if (par) {
    		calcul.innerHTML += ')';
    		par = false;
    	}
 
    	else {
    		calcul.innerHTML += '(';
    		par = true;
    	}
 
	}
 
	function zero() {
 
    		calcul.innerText += '0';
 
	}
 
	function un() {
 
    		calcul.innerText += '1';
 
	}
 
	function deux() {
 
    		calcul.innerHTML += '2';
 
	}
 
	function trois() {
 
    		calcul.innerHTML += '3';
 
	}
 
	function quatre() {
 
    		calcul.innerHTML += '4';
 
	}
 
	function cinq() {
 
    		calcul.innerHTML += '5';
 
	}
 
	function six() {
 
    		calcul.innerHTML += '6';
 
	}
 
	function sept() {
 
    		calcul.textContent += '7';
 
	}
 
	function huit() {
 
    		calcul.innerHTML += '8';
 
	}
 
	function neuf() {
 
    		calcul.innerHTML += '9';
 
	}

09/12/2015, 15h28
NoSmoking

Je ne vois pas de réelles avancées dans ce que tu as écrits, la fonction addChar devrait être appelée pour toutes les insertions de caractère et pas seulement les 3 premières comme je t'ai montré pour exemple.

De plus toutes les fonctions appelées dans ton code HTML ne sont pas définies dans ton code javascript.
09/12/2015, 22h57
aertys

oui mais j'ai mis la 3 premières lignes juste pour tester !

je sais bien qu'au final je mettrai tout les "onclick" appelant addChar, mais juste pour le test je n'en ai mis volontairement que quelques unes et les fonctions JS en trop ne sont pas gênantes.

et bon ce n'était pas si idiot que ça puisque de toute façon, même juste en testant les trois premiers boutons, ça ne fonctionne pas !

Bonjour à tous,

J'ai réecris mes codes html et js en prenant en compte vos remarques. Je croyais que les boutons de ma calculatrice fonctionneraient mieux (c'est à dire qu'ils permettraient d'insérer du texte au-dessus) mais à ce que je vois, ça ne sert à rien !
re voici donc mes codes :
html :

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
<!DOCTYPE html>
 
	<html>
 
		<head>
 
			<link rel="stylesheet" type="text/css" href="css/styles/calculette.css">
			<meta content="text/html; charset=utf-8">
 
		</head>
 
		<body>
 
		 <section>
 
		         <div id="affiche"></div>
 
		    <button class="line3 c1" id="sept" onclick="addChar('7')">7</button>
		    <button class="line3 c2" id="huit" onclick="addChar('8')">8</button>
		    <button class="line3 c3" id="neuf" onclick="addChar('9')">9</button>
		    <span class="apart"></span>
		    <button class="line3 c4" id="mul" onclick="addChar('*')">*</button>
 
 
 
		    <button class="line2 c1" id="quatre" onclick="addChar('4')">4</button>
		    <button class="line2 c2" id="cinq" onclick="addChar('5')">5</button>
		    <button class="line2 c3" id="six" onclick="addChar('6')">6</button>
		    <span class="apart"></span>
		    <button class="line2 c4" id="sub" onclick="addChar('-')">-</button>
 
 
 
		    <button class="line1 c1" id="un" onclick="addChar('1')">1</button>
		    <button class="line1 c2" id="deux" onclick="addChar('2')">2</button>
		    <button class="line1 c3" id="trois" onclick="addChar('3')">3</button>
		    <span class="apart"></span>
		    <button class="line1 c4" id="div" onclick="addChar('/')">/</button>
 
 
 
		    <button class="line0 c1" id="point" onclick="addChar('.')">.</button>
		    <button class="line0 c2" id="zero" onclick="addChar('0')">0</button>
		    <button class="line0 c3" id="egal" onclick="addChar('=')">=</button>
		    <span class="apart"></span>
		    <button class="line0 c4" id="add" onclick="addChar('+')">+</button>
 
 
 
		    <button class="line4 c1" id="c" onclick="c()">C</button>
		    <button class="line4 c2" id="par" onclick="addChar('(')">()</button><!-- 
		    <button class="line4 c3" id="egal" onclick="egal()">=</button>
		    <span class="apart"></span>
		    <button class="line4 c4" id="add" data-op="Setadd" onclick="add()">+</button> -->
 
	    </section>
 
			<script type="text/javascript" src="js/calculette.js"></script>
	   </body>
	</html>

js :

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
 
 
    var par = false;
 
    var calcul = document.getElementById ('affiche');
 
	function addChar(c){
 
		var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE 
		calcul [propText] += c;
 
	}    
 
	function c(){
 
		var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE 
		calcul [propText] = '';
 
	}
 
    function pars() {
 
    	if (par) {
    		calcul.innerHTML += ')';
    		par = false;
    	}
 
    	else {
    		calcul.innerHTML += '(';
    		par = true;
    	}
 
	}

voyez-vous comment corriger mon code pour qu'il m'affiche les bons chiffres ?

joyeux noel et bonne année 2016

04/01/2016, 14h07
NoSmoking

Citation:

mais à ce que je vois, ça ne sert à rien

...???...quand demandes tu le calcul et comment ?
04/01/2016, 17h11
aertys

d"solé je nee comprends plus riien je vais revoir chez moi
04/01/2016, 20h40
aertys

j'ai vu une ligne dans mon html faisant appel à egal (), cela dit celle-ci est en commentaires.
05/01/2016, 18h24
aertys

suggèreriez-vous que je retire cette ligne?

Citation:

suggèreriez-vous que je retire cette ligne?

Ben non c'est justement celle ci qu'il faut garder pour pouvoir lancer le calcul !

Un petit coup de main suivant ce qui a déjà été fait
Code:

1 2 3 4 5 function egal(){ var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE // récupération du contenu, calcul via un eval et affichage du résultat au même endroit calcul [propText] = eval( calcul [propText]); }

06/01/2016, 14h17
aertys

merci pour la fonction j'essayais juste de le faire en affichant les chiffres pour commencer
16/01/2016, 18h06
aertys

j'ai réessayé avec la fonction égal que vous m'avez donnée.
sous firefox ça marche parfaitement ; y'a rien à redire.
mais sous ie, comme d'habitude il ne m'affiche rien lors d'un clic quelconque.je pense que le problème vient de la fonction addChar qui ne fonctionne pas sous ie.
18/01/2016, 18h49
NoSmoking

Pourrais tu nous fournir le code complet, et propre, que tu as actuellement.

Sur quelle version de IE testes tu ?

bonjour,

d'abord la version d'ie sous laquelle j'effectue mes tests est ie11.

revoici mes codes :

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
<!DOCTYPE html>
 
	<html>
 
		<head>
 
			<link rel="stylesheet" type="text/css" href="css/styles/calculette.css">
			<meta charset="utf-8">
 
		</head>
 
		<body>
 
		 <section>
 
		         <div id="affiche"></div>
 
		    <button class="line3 c1" id="sept" onclick="addChar('7')">7</button>
		    <button class="line3 c2" id="huit" onclick="addChar('8')">8</button>
		    <button class="line3 c3" id="neuf" onclick="addChar('9')">9</button>
		    <span class="apart"></span>
		    <button class="line3 c4" id="mul" onclick="addChar('*')">*</button>
 
 
 
		    <button class="line2 c1" id="quatre" onclick="addChar('4')">4</button>
		    <button class="line2 c2" id="cinq" onclick="addChar('5')">5</button>
		    <button class="line2 c3" id="six" onclick="addChar('6')">6</button>
		    <span class="apart"></span>
		    <button class="line2 c4" id="sub" onclick="addChar('-')">-</button>
 
 
 
		    <button class="line1 c1" id="un" onclick="addChar('1')">1</button>
		    <button class="line1 c2" id="deux" onclick="addChar('2')">2</button>
		    <button class="line1 c3" id="trois" onclick="addChar('3')">3</button>
		    <span class="apart"></span>
		    <button class="line1 c4" id="div" onclick="addChar('/')">/</button>
 
 
 
		    <button class="line0 c1" id="point" onclick="addChar('.')">.</button>
		    <button class="line0 c2" id="zero" onclick="addChar('0')">0</button>
		    <button class="line0 c3" id="egal" onclick="egal ()">=</button>
		    <span class="apart"></span>
		    <button class="line0 c4" id="add" onclick="addChar('+')">+</button>
 
 
 
		    <button class="line4 c1" id="c" onclick="c()">C</button>
		    <button class="line4 c2" id="par" onclick="pars()">()</button><!-- 
		    <button class="line4 c3" id="egal" onclick="egal()">=</button>
		    <span class="apart"></span>
		    <button class="line4 c4" id="add" data-op="Setadd" onclick="add()">+</button> -->
 
	    </section>
 
			<script type="text/javascript" src="js/calculette.js"></script>
	   </body>
	</html>

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
body {
	height: 300px;
	width: 210px;
}
section {
	padding-top: 10px;
	width: 210px;
	background-color: #aaaaaa;
	border: 2px solid black;
	height: 300px;
}
button {
	width: 40px;
	height: 40px;
	margin: 2.5px;
}
* {
	margin: 0px;	
}
.c1 {
	margin-left: 10px;
}
.c4 {
	margin-right: 10px;
	font-weight: bold;
}
.line4 {
	margin-bottom: 10px;
}
.line3 {
	margin-top: 10px;
}
.apart {
	width: 20px;
	height: 40px;
}
#affiche {
	width: 175px;
	height: 20px;
	font-weight: bold;
	text-align: right;
	border: 1px solid black;
	margin: 10px; 
	border-radius: 2px;
	background-color: green;
}
.line1,.line2,.line3,.line4,.line0 {
	display: inline-block;
}

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
 
 
    var par = false;
 
    var calcul = document.getElementById ('affiche');
 
	function addChar(c){
 
		var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE 
		calcul [propText] += c;
 
	}    
 
	function c(){
 
		var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE 
		calcul [propText] = '';
 
	}
 
    function pars() {
 
    	if (par) {
    		addChar (')');
    		par = false;
    	}
 
    	else {
    		addChar ('(');
    		par = true;
    	}
 
	}
 
function egal () {
 
    var propText = ('textContent' in calcul) ? 'textContent' : 'innerText'; // prise en compte des vieux IE
    // récupération du contenu, calcul via un eval et affichage du résultat au même endroit
    calcul [propText] = eval( calcul [propText]);
 
}

31/01/2016, 11h28
NoSmoking

Je viens de tester sur IE11 et le code est tout à fait opérationnel, ton soucis est ailleurs ;)