Réalisation d'une calculette

Version imprimable

Bonjour

je réalise une calculatrice

dont voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="content">
    <h1>Veuillez saisir les valeurs:</h1>
    <div class="champ">
        <div class="premier">
            <input type="number" class="first">
        </div>
 
    <div class="deuxieme">
        <input type="number" class="second">
    </div>
 
        <select name="nom" id="choix">
            <option class="addition" value="+">'+'</option>
            <option class="soustraction"  value="-">'-'</option>
            <option class="multiplication" value="*">'*'</option>
            <option class="division" value="/">'/'</option>
            <option class="modulo" value="%">'%'</option>
        </select>
    </div>
 
    <button type="submit" class="try">Try me !</button>
 </div>

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
let nombreUn=document.querySelector('first');
console.log('nombreUn');
 
 
let nombreDeux=document.querySelector('second');
console.log('nombreDeux');
 
let calcul=document.querySelector('.try');
 
let one=0;
let two=0;
let operation=0;
let result=0;
nombreUn=parseInt(one.value);
nombreDeux=parseInt(two.value);
 
const add=document.getElementById('choix').options[0].value;
const moins=document.getElementById('choix').options[1].value;
const mult=document.getElementById('choix').options[2].value;
const div=document.getElementById('choix').options[3].value;
const mod=document.getElementById('choix').options[4].value;
 
 
calcul.addEventListener('click',() =>{
 
 
    if( operation === add ){
        while(nombreDeux < 0){
            alert("error")
        }
 
        result= nombreUn + nombreDeux;
        alert('le resultat:'+ result );
        console.log('le resultat:'+ result)
    }
}
 
);

le soucis est que rien ne se passe quand je clique sur le bouton try qui est censé lancer le calcul
je n ' ai pas de message d 'erreur

Merci pour les éventuelles pistes

Il y a pas mal d'erreurs, je n'ai pas le temps de tout rectifier :

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
<div class="content">
    <h1>Veuillez saisir les valeurs:</h1>
    <div class="champ">
        <div class="premier">
            <input type="number"  value="0" class="first">
        </div>
 
    <div class="deuxieme">
        <input type="number"  value="0" class="second">
    </div>
 
        <select name="nom" id="choix">
            <option class="addition" value="+">'+'</option>
            <option class="soustraction"  value="-">'-'</option>
            <option class="multiplication" value="*">'*'</option>
            <option class="division" value="/">'/'</option>
            <option class="modulo" value="%">'%'</option>
        </select>
    </div>
 
    <button type="submit" class="try">Try me !</button>
 </div>
  <script>
     
    let nombreUn=document.querySelector('.first'),
        nombreDeux=document.querySelector('.second'),  //les points, ce sont des classes...
        calcul=document.querySelector('.try');       
    
 
    let operation=0,
        result=0;
 
    
    const add=document.getElementById('choix').options[0].value;
    const moins=document.getElementById('choix').options[1].value;
    const mult=document.getElementById('choix').options[2].value;
    const div=document.getElementById('choix').options[3].value;
    const mod=document.getElementById('choix').options[4].value;
    
    
    calcul.addEventListener('click',() =>{
        const one=parseInt(nombreUn.value);   // tu as déjà fait une erreur similaire dans un autre post...
        const two=parseInt(nombreDeux.value); // c'était à mettre dans le click sinon ils ne seront pas modifiés...
    
        /*if( operation ==add ){    opération est définie à zéro... sans évolution , il ne peut pas être égale à add =>  pas le temps de gérer la condition...
            while(nombreDeux < 0){
                alert("error")
            }*/
    
            result= one + two;
            alert('le resultat: '+ result );
 
    });
 </script>
 
</body>
</html>

24/09/2023, 16h44
Archimède

Le complément :

Code:

if(document.getElementById('choix').value===add ){.....}

Effectivement beaucoup d'erreurs comme le souligne Archimède.
Code un peu plus épuré.

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
<body>
    <div class="content">
        <h1>Veuillez saisir les valeurs:</h1>
        <div class="champ">
            <div class="premier">
                <input type="number" class="first">
            </div>
            <div class="deuxieme">
                <input type="number" class="second">
            </div>
        </div>
 
        <select name="nom" id="choix">
            <option class="addition" value="+">'+'</option>
            <option class="soustraction" value="-">'-'</option>
            <option class="multiplication" value="*">'*'</option>
            <option class="division" value="/">'/'</option>
            <option class="modulo" value="%">'%'</option>
        </select>
        <button type="button" class="try">Try me !</button>
    </div>
 
    <script>
        let calcul = document.querySelector('.try')
        var typecalcul = document.getElementById('choix')
 
        calcul.addEventListener('click', () => {
            let nombreUn = document.querySelector('.first').value,
                nombreDeux = document.querySelector('.second').value,
                resultat = eval(`${parseInt(nombreUn)} ${typecalcul.value} ${parseInt(nombreDeux)}`)
 
            alert(resultat)
        })
    </script>
</body>

2 pièce(s) jointe(s)

Bonsoir

j ai améliorer mon code tout marche bien.
jusque au moment ou j ajoute le modulo a ce moment plus rien ne marche

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
const nombreUn=document.querySelector('.first');
console.log('nombreUn');
 
 
const nombreDeux=document.querySelector('.second');
console.log('nombreDeux');
 
const calcul=document.querySelector('.try');
 
let one=0;
let two=0;
let operation=0;
let result=0;
 
 
const add=document.getElementById('choix').options[0].value;
const moins=document.getElementById('choix').options[1].value;
const mult=document.getElementById('choix').options[2].value;
const div=document.getElementById('choix').options[3].value;
const mod=document.getElementById('choix').options[4].value;
 
 
calcul.addEventListener('click',() =>{
   let one=parseInt(nombreUn.value);
   let two=parseInt(nombreDeux.value); 
 
    if( document.getElementById('choix').value === add){
        while(two < 0){
            alert("error")
        }
 
        result= one + two;
        alert('le resultat:'+ result );
        console.log('le resultat:'+ result)
    }
 
    else if( document.getElementById('choix').value === moins ){
    while(two < 0){
        alert("error")
    }
 
    result= one - two;
    alert('le resultat:'+ result );
    console.log('le resultat:'+ result)
}
 
else if( document.getElementById('choix').value === mult){
    while(two < 0){
        alert("error")
    }
 
    result= one * two;
    alert('le resultat:'+ result );
    console.log('le resultat:'+ result)
}
 
else if( document.getElementById('choix').value === div){
    while(two < 0){
        alert("error")
    }
 
    result= one / two;
    alert('le resultat:'+ result );
    console.log('le resultat:'+ result)
}
 
else ( document.getElementById('choix').value === mod){
    while(two < 0){
        alert("error");
    }
 
    result= one % two;
    alert('le resultat:'+ result );
    console.log('le resultat:'+ result)
}
 
}
 
);

c' est cette ligne qui pose probleme:

Code:

1
2
3
4
5
6
7
8
9
else ( document.getElementById('choix').value === mod){
    while(two < 0){
        alert("error");
    }
 
    result= one % two;
    alert('le resultat:'+ result );
    console.log('le resultat:'+ result);
}

j'obtiens un message d' erreur

mais j avoue que je trouve pas

Pièce jointe 646465

12/11/2023, 18h14
labarre2002

Probleme résolu j 'ai retiré la condition dans le

Code:

else
13/11/2023, 18h48
NoSmoking
Bonjour,

Citation:

Envoyé par labarre2002

c' est cette ligne qui pose probleme:

compare aux autres, par exemple :
Code:

1 2 3 else if( document.getElementById('choix').value === div){ // ... }
et
Code:

1 2 3 else ( document.getElementById('choix').value === mod){ // ... }
... tu n'as pas l'impression qu'il te manque un if !

Par curiosité, tu comptes faire quoi avec cette boucle :
Code:

1 2 3 while(two < 0){ alert("error") }
13/11/2023, 23h14
labarre2002
Bonsoir

@NoSmoking
Code:

1 2 3 while(two < 0){ alert("error") }
c est l ' énoncé de l ' exercice qui l'exige afficher un message quand la valeur est inférieur a zéro
14/11/2023, 12h10
NoSmoking

Citation:

afficher un message quand la valeur est inférieur a zéro

alert("error"), sans la boucle infinie, est suffisant pour obtenir le résultat, alert étant bloquant.
14/11/2023, 18h33
labarre2002

@NoSmoking

Merci