Partage

CALCULATRICE

Projet de calculatrice en HTML CSS ET JAVASCRIPT mais qui ne marche pa

20 février 2018 à 23:13:03

Après quelques mois de pause, je me suis remis à la programmation, notamment la gestion des évènements et javascript sur du HTML. Juste pour pratiquer, j'ai décidé de me créer une calculatrice. Le problème ... est qu'elle ne marche pas. Si je laisse mon code (JS notamment) pourrais avoir du feedback sur les erreurs que j'ai pu commettre ? Merci d'avance.

Code html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculatrice version 2</title>
        <link rel="stylesheet" href="calculatrice.css">
    </head>

    <body>
        <h2>CALCULATRICE</h2>
        <div class="container">
            <div class="row">
                <div class="contenu">
                    <p>Valeur 1 : <input id="input1"></p>
                    <p>Valeur 2 : <input id="input2"></p>
                    <p>
                        <button id="addition" onclick="Additionne()">+</button>
                        <button id="soustraction" onclick="Soustract()">-</button>
                        <button id="multiplication" onclick="Multiply()">x</button>
                        <button id="division" onclick="Divide()">/</button>
                    </p>
                </div>

            </div>

            <div class="row">
                <p class="resultat"></p>
            </div>

        </div>
        <script src="calculatrice.js"></script>
    </body>
</html>

Code JavaScript

// On va appliquer une gestion des évènements pour chaque bouton 
// Methode 1 : on a déjà l'évènement dans le html, à proscrire sinon

// 1. Fonction addition
function Additionne() {
    // deux variables input et une variable résultat
    let input1 = "";
    let input2 = "";
    let resultat = "";
    // on attache les variables à des éléments du HTML
    input1 = document.getElementById('input1').value;
    input2 = document.getElementById("input2").value;
    // et enfin le calcul
    resultat = input1 + input2;
    // On affiche
    console.log("addition !");
    console.log(resultat);
    document.getElementsByClassName("resultat").innerHTML = `${input1} + ${input2} = ${resultat} <br>`;
}

// 2. Fonction soustraction
function Soustract() {
      // deux variables input et une variable résultat
      let input1 = "";
      let input2 = "";
      let resultat = "";
      // on attache les variables à des éléments du HTML
      document.getElementById("input1").value = input1;
      document.getElementById("input2").value = input2;
      // et enfin le calcul
      resultat = input1 - input2;
      // On affiche
      console.log("soustraction !");
      console.log(input1-input2);
      document.getElementsByClassName("resultat").innerHTML = `${input1} - ${input2} = ${resultat} <br>`;
}

// 3. Fonction multiplication
function Multiply() {
      // deux variables input et une variable résultat
      let input1 = "";
      let input2 = "";
      let resultat = "";
      // on attache les variables à des éléments du HTML
      document.getElementById("input1").value = input1;
      document.getElementById("input2").value = input2;
      // et enfin le calcul
      resultat = input1 * input2;
      // On affiche
      console.log("multiplication !");
      console.log(input1*input2);
      document.getElementsByClassName("resultat").innerHTML = `${input1} x ${input2} = ${resultat} <br>`;

}

// 4. Fonction division
function Divide() {
      // deux variables input et une variable résultat
      let input1 = "";
      let input2 = "";
      let resultat = "";
      // on attache les variables à des éléments du HTML
      document.getElementById("input1").value = input1;
      document.getElementById("input2").value = input2;
      // et enfin le calcul
      resultat = input1 / input2;
      // On affiche
      console.log("Division !");
      console.log(resultat);
      document.getElementsByClassName("resultat").innerHTML = `${input1} / ${input2} = ${resultat} <br>`;
}

//PB : Les opérations ne semblent pas se faire, j'ai limpression que le programme
// ne reconnait pas les valeurs saisies dans les zones input
// Comme des éléments à calculer
// vérification faite avec console log

Code CSS

/* on va centrer le texte sur toute la page*/
body {
    text-align: center
}

/* souligner le titre */
h2 {
    text-decoration: underline
}

/* On va appliquer display flex sur tout les row */
.row {
    display: flex;
    flex-direction: row;
    border : solid black;
}

p {
    border : dotted red;
}

/* on va aussi appliquer display flex sur le container */
.container {
    display:flex;
}

.row {
    width : 50%
}

Romsteack

21 février 2018 à 8:55:55

Salut, tu as une erreur :

Tu veux faire des opérations sur des chaines de caractères, alors pour les division, soustraction et multiplication ça marche mais pas sur l'addition (Il concatène à la place d'additionener)

Tu as une erreur dans ta console ?

D'un seul Homme il vaut mieux se méfier, à deux ils ont pu comploter, trois est le chiffre auquel on peux se fier

Niko300

21 février 2018 à 8:57:02

Salut Martin,

Il y a pas mal de choses à dire sur ton code Javascript.

Dans un premier temps quand tu veux assigner une valeur que tu récupère du DOM dans une variable, il faut toujours faire "variable = DOM" comme pour n'importe quel assignation à une variable en fait (tu l'avais fait correctement pour l'addition).

Je ne comprends pas l'instruction "let", je n'ai jamais vu ça ; Pour déclarer une variable en JS, c'est l'instruction "var".

Ensuite pour ce qui est de l'addition, tu devais convertir tes variables en INT car le "+" sert aussi à concaténer et comme l'élément récupéré est un String, il pense devoir concaténer des String (5 +5 = 55).

De plus, l'élément dans lequel tu veux afficher le résultat étant défini par une class, il faut effectivement utiliser la fonction "getElementsByClassName" mais comme son nom l'indique (il y a un "s" à Elements), il te renvois un tableau de tous les éléments ayant ce nom de class, tu dois donc prendre l'élément d'index [0].

Pour terminer, je pense que tu as utiliser une autre syntaxe qui n'existe pas en JS pour construire la chaine de résultat, j'ai changé ça par une concaténation.

CODE FINAL :

// On va appliquer une gestion des évènements pour chaque bouton 
// Methode 1 : on a déjà l'évènement dans le html, à proscrire sinon
 
// 1. Fonction addition
function Additionne() {
    // deux variables input et une variable résultat
    var input1 = "";
    var input2 = "";
    var resultat = "";
    // on attache les variables à des éléments du HTML
    input1 = document.getElementById("input1").value;
    input2 = document.getElementById("input2").value;
    // et enfin le calcul
    resultat = parseInt(input1) + parseInt(input2);
    // On affiche
    console.log("addition !");
    console.log(resultat);
    document.getElementsByClassName("resultat")[0].innerHTML = input1+' + '+input2+' = '+resultat+' <br>';
}
 
// 2. Fonction soustraction
function Soustract() {
      // deux variables input et une variable résultat
      var input1 = "";
      var input2 = "";
      var resultat = "";
      // on attache les variables à des éléments du HTML
      input1 = document.getElementById("input1").value;
      input2 = document.getElementById("input2").value;
      // et enfin le calcul
      resultat = input1 - input2;
      // On affiche
      console.log("soustraction !");
      console.log(resultat);
      document.getElementsByClassName("resultat")[0].innerHTML = input1+' - '+input2+' = '+resultat+' <br>';

	  }
 
// 3. Fonction multiplication
function Multiply() {
      // deux variables input et une variable résultat
      var input1 = "";
      var input2 = "";
      var resultat = "";
      // on attache les variables à des éléments du HTML
      input1 = document.getElementById("input1").value;
      input2 = document.getElementById("input2").value;
      // et enfin le calcul
      resultat = input1 * input2;
      // On affiche
      console.log("multiplication !");
      console.log(resultat);
      document.getElementsByClassName("resultat")[0].innerHTML = input1+' * '+input2+' = '+resultat+' <br>';
 
}
 
// 4. Fonction division
function Divide() {
      // deux variables input et une variable résultat
      var input1 = "";
      var input2 = "";
      var resultat = "";
      // on attache les variables à des éléments du HTML
      input1 = document.getElementById("input1").value;
      input2 = document.getElementById("input2").value;
      // et enfin le calcul
      resultat = input1 / input2;
      // On affiche
      console.log("division !");
      console.log(resultat);
      document.getElementsByClassName("resultat")[0].innerHTML = input1+' / '+input2+' = '+resultat+' <br>';
}
 
//PB : Les opérations ne semblent pas se faire, j'ai limpression que le programme
// ne reconnait pas les valeurs saisies dans les zones input
// Comme des éléments à calculer
// vérification faite avec console log

-
Edité par Niko300 21 février 2018 à 9:18:49

World of Potion | Discord 3D [FR] | Direct Quiz

quenti77

21 février 2018 à 9:26:32

Niko300 a écrit:

Je ne comprends pas l'instruction "let", je n'ai jamais vu ça ; Pour déclarer une variable en JS, c'est l'instruction "var".

L'instruction let c'est juste la nouvelle façons de déclarer des variables en JS et c'est ce qu'il faut utiliser de nos jours.

var c'est en ES5 et let en ES6. Cela permet d'éviter les erreurs du type :

for (var i = 0; i < 10; i++) {}
console.log(i) // Existe et vaut 10

for (let j = 0; j < 10; j++) {}
console.log(j) // error undefined variable j

Merci donc de faire une recherche quand on connait pas pour voir si ça existe pas vraiment.

Par contre pour l'auteur s'il fait de l'es6 ou plus je lui conseillerais la méthode querySelector ou querySelectorAll au besoin :

input1 = parseInt(input1)
input2 = parseInt(input2)

let results = document.querySelectorAll('.resultat')
results[0].innerHTML = input1 + ' + ' + input2 + ' = ' + (input1 + input2)

Fait un peu vite mais fonctionnel (normalement) : https://jsbin.com/lubuhezize/4/edit?js,output

-
Edité par quenti77 21 février 2018 à 9:47:54

My website : Mon serveur discord, Se demerder tout seul, Faille XSS et SQL

Niko300

21 février 2018 à 9:48:58

Je ne connaissais pas "let" et ça semblait bloquer le code mais en réessayant j'ai vu que ça marchait avec "let"

querySelector, je ne connaissais pas non plus, ça m'a l'air intéressant, plus besoin de jQuery

Mais est-ce que ça ne tue pas la compatibilité avec les anciens navigateurs ?

World of Potion | Discord 3D [FR] | Direct Quiz

quenti77

21 février 2018 à 10:03:38

Avec babeljs on peut très bien faire la conversion sur certains élément après le mieux c'est que les gens on les force un peu à changer et à ce mettre à jour

https://goo.gl/wXgwvv (Site babeljs.io avec un exemple de code et sa traduction en es5)

-
Edité par quenti77 21 février 2018 à 10:04:32

My website : Mon serveur discord, Se demerder tout seul, Faille XSS et SQL

007julien

21 février 2018 à 12:59:25

Cette calculatrice n’additionne que des entiers ? Un Number cserait préférable à un parseInt ou parseFloat !
mais, en toute hypothèse, un signe plus devant serait suffisant :

    input1 = +document.getElementById("input1").value;
    input2 = +document.getElementById("input2").value;

KyssamaJeanMartin

22 février 2018 à 22:43:27

feedback !

j'ai pas pu résister, j'ai repris le code dès le début en m'inspirant un peu de ce que tu as fait Niko300.

je serai ravi d'avoir du feedback !

PS : par contre maintenant j'ai l'impression d'être une fraude car je n'ai pas trouvé tout seul

code html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculatrice version 2</title>
        <link rel="stylesheet" href="calculatrice.css">
    </head>

    <body>
        <h2>CALCULATRICE</h2>
        <div class="container">
            <div class="row">
                <div class="contenu">
                    <p>Valeur 1 : <input id="input1"></p>
                    <p>Valeur 2 : <input id="input2"></p>
                    <p>
                        <button id="addition" onclick="Additionne()">+</button>
                        <button id="soustraction" onclick="Soustract()">-</button>
                        <button id="multiplication" onclick="Multiply()">x</button>
                        <button id="division" onclick="Divide()">/</button>
                    </p>
                </div>

            </div>

            <div class="row">
                <p class="resultat"></p>
            </div>

        </div>
        <script src="calculatrice.js"></script>
    </body>
</html>

Code Js

// On va appliquer une gestion des évènements pour chaque bouton 
// Methode 1 : on a déjà l'évènement dans le html, à proscrire sinon

// 1. on va créer deux variables liées aux zones de saisie input
const input1 = document.querySelector("#input1");
const input2 = document.querySelector("#input2");

// 2. Ensuite on transforme ces chaines de caractères saisies en entier avec parseInt 
const a = parseInt(input1.value); // Attention le value aussi est mis entre parenthèses car c'est ce qui est transformé
const b = parseInt(input2.value);

//Les variables a et b vont servir aux calculs

// 3. fonction Additionne
function Additionne () {
      // on crée une variable retournée qui va détailler le calcul
      const calcul = a + b;
      console.log("Addition!");
      document.querySelector(".resultat").innerHTML += `Résultat : ${calcul} <br>`;
      return calcul;
     
}

// On fait la même chose pour les autres fonctions
// 4. function Soustract
function Soustract () {
      const calcul = a-b;
      console.log("Soustraction!");
      document.querySelector(".resultat").innerHTML += `Résultat : ${calcul}<br>`;
      return calcul;
      
}

// 5.  Fonction division
function Divide () {
      const calcul = a / b;
      console.log("Division !");
      document.getElementsByClassName("resultat").innerHTML += `Résultat : ${calcul}<br>`;
      return calcul;
     
}

// fontion multiplication
function Multiply() {
      const calcul = a * b;
      console.log("Multiplication !");
      document.querySelector(".resultat").innerHTML += `Résultat : ${calcul}<br>`;
      return calcul;
     
}

Code CSS

/* on va centrer le texte sur toute la page*/
body {
    text-align: center
}

/* souligner le titre */
h2 {
    text-decoration: underline
}

/* On va appliquer display flex sur tout les row */
.row {
    display: flex;
    flex-direction: row;
    border : solid black;
}

p {
    border : dotted red;
}

/* on va aussi appliquer display flex sur le container */
.container {
    display:flex;
}

.row {
    width : 50%
}

-
Edité par KyssamaJeanMartin 22 février 2018 à 23:22:55

quenti77

23 février 2018 à 7:18:42

Je dirais juste que les méthodes Additionne, Soustract (Soustrait en français xd) etc ne devrais pas mettre le résultat dans l'HTML. Ce n'est pas son but. Regarde mon jsfiddle pour comparer

-
Edité par quenti77 23 février 2018 à 7:20:02

My website : Mon serveur discord, Se demerder tout seul, Faille XSS et SQL

CALCULATRICE

Projet de calculatrice en HTML CSS ET JAVASCRIPT mais qui ne marche pa

Supprimer

Modérer

Signaler le message aux modérateurs