Dernier TP JS – Calculatrice

Le sujet est clair : réaliser ceci :

à partir de cette page html à ne pas modifier :

<!-- *********************************** -->
<!-- CE FICHIER NE DOIT PAS ETRE MODIFIÉ -->
<!-- *********************************** -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>NSI TP Calculatrice</title>
</head>
<body>
    <h1>NSI - TP - JS - Calculatrice</h1>
    <!-- Les nouveaux éléments sont 
    ajoutés dans cette balise -->
    <div id="contenu">
    </div>

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

en créant le script calculatrice.js en JavaScript.

N.B. :

  • pour transformer un texte a en nombre, on pourra utiliser a = Number(a);

À finir pour vendredi ! Bon courage !

Plan d’action proposé en cours :

// Récupération du div de contenu
let contenuElt = document.getElementById('contenu');
// on crée un formulaire
let formElt = document.createElement('form');
// je crée la première zone de texte
// je lui donne les bons attributs
let inputElt1 = document.createElement('input');
// ...
// je la rajoute au formulaire

// idem avec la deuxième

// d'ailleurs moi je ferai une fonction dans le 
// corrigé puisque deux fois la même chose !

// je crée un bouton "+" avec l'attribut submit
// je le rajoute au formulaire
// je mets mon formulaire dans la contenuElt
// j'écoute le formulaire
// à l'action 'submit' ...

3 réflexions au sujet de « Dernier TP JS – Calculatrice »

  1. Bonjour monsieur j’ai besoin d’aide pour faire le calcule entre les 2 variable:
    Voici le code :

    // j'écoute le formulaire
    formElt.addEventListener('submit', function() {
      console.log("a fait " + box1.value);
      console.log("b fait " + box2.value);
      console.log(box1.value + box2.value);
      let resultat = box1.value + box2.value;
      let parElt= formElt.appendChild('p');
      parElt.appendChild(resultat);
    });
    

    et la sortie;

    (le programme affiche pas le:  "a fait x")
    b fait 1 
    21
    Uncaught TypeError: Node.appendChild: Argument 1 is not an object.

    Merci

    • Alors… bonsoir…

      À la ligne 2, rajouter un e comme argument de la fonction et au début de la fonction insérer e.preventDefault(); pour que le bouton ne soit pas interprété par le navigateur mais bien par JavaScript.

      Après, convertir la chaîne de caractères box1.value en entier avec par exemple let a = Number(box1.value);
      Idem pour let b = Number(box2.value); et ta somme sera juste !

      Enfin, à la ligne 7 il faut deux étapes

      let parElt= document.createElement('p');
      formElt.appendChild(parElt); //et pas une balise

      Pareil, il faut changer le innerHtml de parElt et pas ajouter un « fils » !

      parElt.innerHtml = a + " + " + ... ;

      Bon courage !

N'hésitez-pas à poser une question, ou faire avancer le schmilblick

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.