IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Réalisation d'une calculette


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    244
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 244
    Par défaut Réalisation d'une calculette
    Bonjour

    je réalise une calculatrice

    dont voici le code :


    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
    <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 javascript : 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
    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

  2. #2
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Il y a pas mal d'erreurs, je n'ai pas le temps de tout rectifier :
    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
    <!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>

  3. #3
    Membre Expert
    Avatar de Archimède
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 59
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par défaut
    Le complément :
    Code JAVASCRIPT : Sélectionner tout - Visualiser dans une fenêtre à part
     if(document.getElementById('choix').value===add ){.....}

  4. #4
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Effectivement beaucoup d'erreurs comme le souligne Archimède.
    Code un peu plus épuré.

    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
    <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>

  5. #5
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    244
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 244
    Par défaut
    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 javascript : 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
    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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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

    Nom : cccccccccccccc.jpg
Affichages : 231
Taille : 69,7 Ko
    Images attachées Images attachées  

  6. #6
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    244
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 244
    Par défaut
    Probleme résolu j 'ai retiré la condition dans le

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    Citation Envoyé par labarre2002
    c' est cette ligne qui pose probleme:
    compare aux autres, par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    else if( document.getElementById('choix').value === div){
      // ...
    }
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
            while(two < 0){
                alert("error")
            }

  8. #8
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    244
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 244
    Par défaut
    Bonsoir

    @NoSmoking


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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.

  10. #10
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    244
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 244
    Par défaut
    @NoSmoking

    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Problème sur la réalisation d'une requête
    Par soso78 dans le forum Access
    Réponses: 1
    Dernier message: 06/10/2005, 13h17
  2. [Trigger] Comment le réaliser sur une vue ?
    Par mandale dans le forum DB2
    Réponses: 1
    Dernier message: 19/09/2005, 13h43
  3. conception et réalisation d'une application client/serveur
    Par masvivi dans le forum Développement
    Réponses: 1
    Dernier message: 24/08/2005, 12h32
  4. [Radio fréquence] réalisation d'une application
    Par WriteLN dans le forum Développement
    Réponses: 14
    Dernier message: 05/06/2003, 14h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo