Calculatrice en JavaScript

**aertys** · 20/03/2015, 15h53

bonjour à tous,

j'ai essayé de créer une calculatrice en js, jquery et html

donc voici mon 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
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Calculatrice</title>
		<link rel="icon" href="favicon.ico" />
	</head>
 
	<body id="b">  
 
	    <fieldset>
	         <div id="affiche"></div>
	    </fieldset>
 
	    <button class="line3" id="sept">7</button>
	    <button class="line3" id="huit">8</button>
	    <button class="line3" id="neuf">9</button>
	    <span>  </span>
	    <button class="line3" id="mul">*</button>
 
	    <br>	   
 
	    <button class="line2" id="quatre">4</button>
	    <button class="line2" id="cinq">5</button>
	    <button class="line2" id="six">6</button>
	    <span>  </span>
	    <button class="line2" id="sub">-</button>
 
	    <br>
 
	    <button class="line1" id="un">1</button>
	    <button class="line1" id="deux">2</button>
	    <button class="line1" id="trois">3</button>
	    <span>  </span>
	    <button class="line1" id="div">/</button>
 
	    <br>	
 
	    <button class="line0" id="point">.</button>
	    <button class="line0" id="zero">0</button>
	    <button class="line0" id="ega:">=</button>
	    <span>  </span>
	    <button class="line0" id="add">+</button>
 
	    <br>
 
	    <p>Votre résultat est de : <p id="result"></p></p>
 
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/calculette.js"></script>
 
	 </body> 
</html>

et mon js:

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
$(function() {     
 
    var result;
    var calcul1;    
    var calcul2;
    var affiche = $('#affiche') [0];
 
     var operation = {
          var add = false;
          var div = false;
          var sub  = false;
          var mul = false;
          Setadd: function (val) {  
                  this.add = val; 
                  this.Setdiv (false);
                  this.Setsub (false);
                  this.Setmul (false);
                  calcul1 = affiche.innerHTML + '+';
                  affiche.innerHTML = '';
           };
           Setdiv: function (val) {  
                  this.div = val; 
                  this.Setadd (false);
                  this.Setsub (false);
                  this.Setmul (false);
                  calcul1 = affiche.innerHTML + '/';
                  affiche.innerHTML = '';
          };
          Setsub: function (val) {  
                  this.sub = val; 
                  this.Setdiv (false);
                  this.Setadd (false);
                  this.Setmul (false);
                  calcul1 = affiche.innerHTML + '-';
                  affiche.innerHTML = '';
          };
          Setmul: function (val) {  
                  this.mul = val; 
                  this.Setdiv (false);
                  this.Setsub (false);
                  this.Setadd (false);
                  calcul1 = affiche.innerHTML + '*';
                  affiche.innerHTML = '';
          };
 
     };
 
     $('.line0').css ({
          display : 'inline-block'
     });
     $('.line1').css ({
          display : 'inline-block'
     });
     $('.line2').css ({
          display : 'inline-block'
     });
     $('.line3').css ({
          display : 'inline-block'
     });
 
    $(affiche).css ({
          backgroundColor : '#339933',
          textAlign : 'right'
     });
 
     $('#zero').click (function () {
          affiche.innerHTML += '0';          
     });
 
     $('#un').click (function () {
          affiche.innerHTML += '1';          
     });
 
     $('#deux').click (function () {
          affiche.innerHTML += '2';          
     });
 
     $('#trois').click (function () {
          affiche.innerHTML += '3';          
     });
 
     $('#quatre').click (function () {
          affiche.innerHTML += '4';          
     });
 
     $('#cinq').click (function () {
          affiche.innerHTML += '5';          
     });
 
     $('#six').click (function () {
          affiche.innerHTML += '6';          
     });
 
     $('#sept').click (function () {
          affiche.innerHTML += '7';          
     });
 
     $('#huit').click (function () {
          affiche.innerHTML += '8';          
     });
 
     $('#neuf').click (function () {
          affiche.innerHTML += '9';          
     });    
 
 
     $('#plus').click (function () {
          operation.Setadd (true);         
     });
 
     $('#sub').click (function () {
          operation.Setsub (true);         
     });
 
     $('#mul').click (function () {
          operation.Setmul (true);         
     });
 
     $('#div').click (function () {
          operation.Setdiv (true);         
     });
 
 
     $('#point').click (function () {
          affiche.innerHTML += '.';         
     });
 
     $('#egal').click (function () {
          calcul2 = calcul1 + affiche.innerHTML;
          result = eval (calcul2);        
          affiche.innerHTML = ''; 
          $('#result').html (calcul2);
     });
 
});

quand je teste en appuyant sur un bouton il ne se passe rien

avez-vous une idée?

**SpaceFrog** · 20/03/2015, 16h17

pas étonnant ...
Tu regardes les erreur en console ?

Tu as une curieuse syntaxe pour ton json ...
Un tas de répétitions inutiles
Des fonctions inutiles ...

en nettoyant un peu tout ça on a un début de quelque chose ...
http://fiddle.jshell.net/gm8fddo2/2/

**aertys** · 23/03/2015, 10h08

merci bien j’ai regardé sous jsfiddle et ça marche
cela dit sous firefox et c'est bien la dernière$ version, qand je clique sur bouton il ne se passe toujours rien:

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
22
23
24
25
26
27
28
<fieldset>
    <div id="affiche"></div>
</fieldset>
<button class="line3" id="sept">7</button>
<button class="line3" id="huit">8</button>
<button class="line3" id="neuf">9</button>
<span>  </span>
<button class="line3" id="mul" data-op="Setmul">*</button>
<br>	   
<button class="line2" id="quatre">4</button>
<button class="line2" id="cinq">5</button>
<button class="line2" id="six">6</button>
<span>  </span>
<button class="line2" id="sub" data-op="Setsub">-</button>
<br>
<button class="line1" id="un">1</button>
<button class="line1" id="deux">2</button>
<button class="line1" id="trois">3</button>
<span>  </span>
<button class="line1" id="div" data-op="Setdiv">/</button>
<br>	
<button class="line0" id="point">.</button>
<button class="line0" id="zero">0</button>
<button class="line0" id="egal">=</button>
<span>  </span>
<button class="line0" id="add" data-op="Setadd">+</button>
<br>
<p>Votre résultat est de : <p id="result"></p></p>

js:

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
$(function() {     
    var result;
    var affiche = $('#affiche') ;
     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);
     });
 
});

**-Rpass-** · 23/03/2015, 10h18

Bonjour,

dans un premier temps tu peux enlever ta variable operation contenant tes fonctions, car elle ne te sert plus à rien

**aertys** · 23/03/2015, 14h36

c'est ce que j'ai fait
mais rien ne change

Calculatrice en JavaScript

jQuery

Discussions similaires

Partager

Partager