Partage
  • Partager sur Facebook
  • Partager sur Twitter

Un bouton pour réinitialiser

    9 février 2024 à 12:39:18

    Bonjour la communauté !
    Je suis en développement d'un calculateur qui compare le cout de la cigarette vs cigarette électronique en HTML/CSS et JS
    Je rencontre un problème pour réinitialiser les calculs après avoir lancer un 1er calcul.
    Ma console d'erreur (F12) me renvoi une erreur que je comprends, certes, mais que je n'arrive pas à résoudre (Uncaught TypeError: document.getElementById(...) is null)!
    Bien entendu, le ID correspondent bien à mon HTML :)
    Qui pourrais m'aider ?
    Voici mon code :
     
    $(function () {
        $("button, input, a").on("click", function (event) {
            event.preventDefault();
        });
    	
       });
    $("#resetBtn").on("click", function() {
       // Réinitialiser les valeurs des panneaux à zéro
        document.getElementById('economieMensuelle').innerHTML = "0";
        document.getElementById('economieAnnuelle').innerHTML = "0";
        document.getElementById('resultatCigarette').innerHTML = "";
        document.getElementById('resultatCigaretteElectronique').innerHTML = "";
    
        // Réinitialiser les valeurs des champs de saisie
        document.getElementById('cigarettesParJour').value = "";
        document.getElementById('coutDuPaquet').value = "";
        document.getElementById('cigarettesParPaquet').value = "20"; // Remettre par défaut à 20
    
        // Appeler la fonction de calcul pour réinitialiser les panneaux
        calculer();
    });
    function calculer() {
    
        console.log("Fonction calculer appelée");
        var cigarettesParJour = document.getElementById('cigarettesParJour').value;
        var coutDuPaquet = parseFloat(document.getElementById('coutDuPaquet').value);
        var eliquide10ml = 5.90;
        var eliquideCigarettes = 60;
        var kitCigaretteElectronique = 50;
        var resistance = 3;
        var resistanceAchatsParMois = 2;
        var cigarettesParPaquet = parseInt(document.getElementById('cigarettesParPaquet').value) || 20;
    
    	console.log("Valeurs récupérées depuis le formulaire :");
        console.log("Nombre de cigarettes par jour :", cigarettesParJour);
        console.log("Coût du paquet de cigarettes :", coutDuPaquet);
        console.log("Nombre de cigarettes par paquet :", cigarettesParPaquet);
    
    
     
    
        var paquetsNecessaires = Math.ceil(cigarettesParJour / cigarettesParPaquet);
        var coutJournalierCigarette = parseFloat((coutDuPaquet / cigarettesParPaquet) * cigarettesParJour);
        var coutHebdomadaireCigarette = parseFloat(coutJournalierCigarette * 7);
        var coutMensuelCigarette = parseFloat(coutJournalierCigarette * 30);
        var coutAnnuelCigarette = parseFloat(coutJournalierCigarette * 365);
    
        var coutAnnuelKitCigaretteElectronique = parseFloat(kitCigaretteElectronique);
    
        var coutJournalierKitCigaretteElectronique = parseFloat(coutAnnuelKitCigaretteElectronique / 365);
        var coutHebdomadaireKitCigaretteElectronique = parseFloat(coutJournalierKitCigaretteElectronique * 7);
        var coutMensuelKitCigaretteElectronique = parseFloat(coutHebdomadaireKitCigaretteElectronique * 4);
    
        var coutJournalierCigaretteElectronique = parseFloat((eliquide10ml / eliquideCigarettes) * cigarettesParJour + (resistance * resistanceAchatsParMois / 30) + coutJournalierKitCigaretteElectronique);
        var coutHebdomadaireCigaretteElectronique = parseFloat((coutJournalierCigaretteElectronique * 7) + coutHebdomadaireKitCigaretteElectronique);
        var coutMensuelCigaretteElectronique = parseFloat((coutJournalierCigaretteElectronique * 30) + coutMensuelKitCigaretteElectronique);
        var coutAnnuelCigaretteElectronique = parseFloat((coutMensuelCigaretteElectronique * 12) + coutAnnuelKitCigaretteElectronique);
    
      	
    // Appeler la fonction pour afficher les résultats
    afficherResultat(); 
    
        function afficherResultat() {
     	var economieMensuelle = parseFloat((coutMensuelCigarette - coutMensuelCigaretteElectronique).toFixed(2));
    var economieAnnuelle = parseFloat((coutAnnuelCigarette - coutAnnuelCigaretteElectronique).toFixed(2));
    
     if (!isNaN(economieMensuelle) && !isNaN(economieAnnuelle)) {
        document.getElementById('economieMensuelle').innerHTML = economieMensuelle.toFixed(2) + "€";
        document.getElementById('economieAnnuelle').innerHTML = economieAnnuelle.toFixed(2) + "€";
     }       
    		var resultatCigarette = "<h3title>Cigarette :</h3title><div>Coût journalier : " + coutJournalierCigarette.toFixed(2) + " €</div><div>Coût hebdomadaire : " + coutHebdomadaireCigarette.toFixed(2) + " €</div><div>Coût mensuel : " + coutMensuelCigarette.toFixed(2) + " €</div><div>Coût annuel : " + coutAnnuelCigarette.toFixed(2) + " €</div>";
    
            var resultatCigaretteElectronique = "<h3title>Cigarette Électronique :</h3title><div>Coût journalier : " + coutJournalierCigaretteElectronique.toFixed(2) + " €</div><div>Coût hebdomadaire : " + coutHebdomadaireCigaretteElectronique.toFixed(2) + " €</div><div>Coût mensuel : " + coutMensuelCigaretteElectronique.toFixed(2) + " €</div><div>Coût annuel : " + coutAnnuelCigaretteElectronique.toFixed(2) + " €</div>";
    
            document.getElementById('economie').innerHTML = economie;
            document.getElementById('resultatCigarette').innerHTML = resultatCigarette;
            document.getElementById('resultatCigaretteElectronique').innerHTML = resultatCigaretteElectronique;
    
    genererPanneau(
            parseInt(coutMensuelCigarette.toFixed(2)) - parseInt(coutMensuelCigaretteElectronique.toFixed(2)),
            parseInt(coutAnnuelCigarette.toFixed(2)) - parseInt(coutAnnuelCigaretteElectronique.toFixed(2)),
            'economie'
        );	   
        }
    }
    
    function incrementerChiffre(valeurActuelle, valeurCible, element) {
        let intervalID;
    	const partieDecimale = valeurCible.toString().split('.')[1];
        const chiffresDecimaux = partieDecimale ? partieDecimale.length : 0;
    	
        function incrementer() {
            // Afficher le chiffre incrémenté
            element.innerHTML = '<p>' + valeurActuelle + '</p>'
    
            // Passer au chiffre suivant
            valeurActuelle += 1 / Math.pow(10, chiffresDecimaux);
    
            // Arrêter l'incrémentation si le chiffre actuel est supérieur à la cible
            if (valeurActuelle > valeurCible) {
                clearInterval(intervalID);
            }
        }
    
        intervalID = setInterval(incrementer, 500); // Ajustez l'intervalle selon vos besoins
    }
    
    function genererPanneau(chiffreMensuel, chiffreAnnuel, parentID) {
        var parent = document.getElementById(parentID);
        parent.innerHTML = '';
    
        var chiffreMensuelStr = chiffreMensuel.toString();
        var chiffreAnnuelStr = chiffreAnnuel.toString();
    	
    // Créer le titre Économies Réalisées
        var titreEconomies = document.createElement('h3title');
        titreEconomies.textContent = 'Économies réalisées :';
        parent.appendChild(titreEconomies);
    
        // Créer le sous-titre Mensuel
        var sousTitreMensuel = document.createElement('div');
        sousTitreMensuel.className = 'sous-titre';
        sousTitreMensuel.textContent = 'MENSUELLE';
        parent.appendChild(sousTitreMensuel);
        for (var i = 0; i < chiffreMensuelStr.length; i++) {
    
        // Créer un élément div pour chaque chiffre mensuel
            var panneauMensuel = document.createElement('div');
            panneauMensuel.className = 'letter-sncf';
            panneauMensuel.innerHTML = '<p>' + chiffreMensuelStr[i] + '</p>';
            parent.appendChild(panneauMensuel);
    
        // Démarrer l'incrémentation pour chaque chiffre mensuel
            incrementerChiffre(0, chiffreMensuelStr[i], panneauMensuel);
        }
    	
        // Créer un panneau pour le symbole €
        var panneauEuroMensuel = document.createElement('div');
        panneauEuroMensuel.className = 'letter-sncf';
        panneauEuroMensuel.innerHTML = '<p>€</p>';
        parent.appendChild(panneauEuroMensuel);
    
        // Ajouter un espace entre les chiffres mensuels et annuels
        parent.innerHTML += '<div style="width: 20px;"></div>';
    
     // Créer le sous-titre Annuel
        var sousTitreAnnuel = document.createElement('div');
        sousTitreAnnuel.className = 'sous-titre';
        sousTitreAnnuel.textContent = 'ANNUELLE';
        parent.appendChild(sousTitreAnnuel);
        for (var j = 0; j < chiffreAnnuelStr.length; j++) {
            // Créer un élément div pour chaque chiffre annuel
            var panneauAnnuel = document.createElement('div');
            panneauAnnuel.className = 'letter-sncf';
            panneauAnnuel.innerHTML = '<p>' + chiffreAnnuelStr[j] + '</p>';
            parent.appendChild(panneauAnnuel);
    
            // Démarrer l'incrémentation pour chaque chiffre annuel
            incrementerChiffre(0, chiffreAnnuelStr[j], panneauAnnuel);
        }
    	 // Créer un panneau pour le symbole €
        var panneauEuroAnnuel = document.createElement('div');
        panneauEuroAnnuel.className = 'letter-sncf';
        panneauEuroAnnuel.innerHTML = '<p>€</p>';
        parent.appendChild(panneauEuroAnnuel);
    }
    Merci d'avance :)

    -
    Edité par ajja17r 9 février 2024 à 12:40:23

    • Partager sur Facebook
    • Partager sur Twitter
      9 février 2024 à 15:30:40

      Bonjour,

      quel est le HTML associé ? On en a besoin de pouvoir reproduire chez nous ton code et voir où est l'erreur.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        10 février 2024 à 10:20:20

        Bonjour Laecarlate !
        Merci pour ta réponse ! Voici le HTML associé :
        <!DOCTYPE html>
        <html lang="fr" class="page1">
        
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="Calculez vos économies avec la cigarette électronique">
            <link rel="icon" type="image/png" href="images/favicon.png" />
            <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/ui-darkness/jquery-ui.css">
            <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
            
        
            <title>Comparateur Coût Cigarette Électronique</title>
        </head>
        
        <body>
            <div class="conteneur-image">
                <a href="https://www.XXX.com" target="_self"><img src="images/classicVSelectronic.jpg" class="img-responsive" alt="XXX_logo" title="XXX" /></a>
            </div>
        
            <div class="container">
                <h1>Comparateur Coût Cigarette Électronique</h1>
                <div class="input-group">
                    <label for="cigarettesParJour">Nombre de cigarettes par jour :</label>
                    <input type="number" id="cigarettesParJour" name="cigarettesParJour" placeholder="Nombre de cigarettes">
                </div>
                <div class="input-group">
                    <label for="coutDuPaquet">Coût du paquet de cigarettes (en €) :</label>
                    <input type="number" id="coutDuPaquet" name="coutDuPaquet" placeholder="Coût du paquet">
                </div>
                <div class="input-group">
                    <label for="cigarettesParPaquet">Nombre de cigarettes par paquet :</label>
                    <input type="number" id="cigarettesParPaquet" value="20">
                </div>
                <button id="calculerBtn" class="ui-button ui-corner-all ui-widget" onclick="calculer()">Calculer</button>
        		<button id="resetBtn" class="ui-button ui-corner-all ui-widget">Réinitialiser</button>
        
        <!-- AFFICHER LE RESULTAT -->
        <div class="resultat">
                <div class="resultat_eco" id="economie">        
        		<h3title>Économies réalisées :</h3title>
        		<div class="sous-titre">MENSUELLE</div>
        		<div id="economieMensuelle" class="resultat-sous-titre"></div>
        		<div class="sous-titre">ANNUELLE</div>
        		<div id="economieAnnuelle" class="resultat-sous-titre"></div>
        		</div>		
        </div>
        <!-- AFFICHER LE RESULTAT SECONDAIRE -->	
                <div class="resultat" id="resultatCigarette"></div>
                <div class="resultat" id="resultatCigaretteElectronique"></div>
        		
        <!-- AFFICHE ou CACHE LES PARAMETRES DE CALCUL -->
                <button class="ui-button ui-corner-all ui-widget" id="toggleParametres" onclick="toggleAffichage()">Afficher les paramètres de calcul</button>
                <div id="parametresCigaretteElectronique" class="cache">
                    <legend><h3>Paramètres pour la Cigarette Électronique</h3></legend>
                    <p>Le eliquide de 10ml coûte en moyenne 5€90 et correspond à une moyenne de 60 cigarettes consommées</p>
                    <p>La résistance coûte en moyenne 3€ et dure environ 2 semaines</p>
                    <p>Le coût d'un kit de cigarette électronique + 1 kit de remplacement est d'environ 50€ par an</p>
                </div>
            </div>
        <!-- FONCTION AFFICHE ou CACHE LES PARAMETRES DE CALCUL -->
            <script>
                function toggleAffichage() {
                    var parametresCigaretteElectronique = document.getElementById('parametresCigaretteElectronique');
                    var boutonToggle = document.getElementById('toggleParametres');
        
                    if (window.getComputedStyle(parametresCigaretteElectronique).maxHeight === "0px") {
                        parametresCigaretteElectronique.style.display = "block";
                        setTimeout(function () {
                            parametresCigaretteElectronique.style.maxHeight = "500px";
                            parametresCigaretteElectronique.style.opacity = "1";
                        }, 10);
                        boutonToggle.textContent = "Cacher les paramètres de calcul";
                    } else {
                        parametresCigaretteElectronique.style.maxHeight = "0";
                        parametresCigaretteElectronique.style.opacity = "0";
                        setTimeout(function () {
                            parametresCigaretteElectronique.style.display = "none";
                        }, 500);
                        boutonToggle.textContent = "Afficher les paramètres de calcul";
                    }
                }
            </script>
        	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <script src="calculateur.js"></script>
        </body>
        
        </html>
        
        • Partager sur Facebook
        • Partager sur Twitter
          10 février 2024 à 18:45:11

          Alors j'ai pris ton code, je l'ai mis dans Codepen et j'ai reproduit le souci. Je ne sais pas encore pourquoi, mais oui, tes divs d'id "economieMensuelle" et "economieAnnuelle" disparaissent quand on lance le calcul, remplacées par la suite de letter-sncf etc. J'ai encore du mal à comprendre ton code, mais je tenais à te donner cette info parce que ça peut te mettre sur une piste en parallèle. Je pense que tu remplaces tout le contenu de la div d'id "economie" à un endroit…

          (note : h3title n'existe pas, écrire document.createElement('h3title') ne suffit pas à créer un élément valide ; pourquoi ne pas avoir utilisé un vrai titre ?)

          -
          Edité par Lamecarlate 10 février 2024 à 18:45:35

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            13 février 2024 à 10:17:52

            Dans ta fonction genererPanneau tu fait parent.innerHTML = '', or dans afficherResultat tu appelles genererPanneau avec economie comme parentID, donc tout ce qu'il y a dans economie est ecrase.
            • Partager sur Facebook
            • Partager sur Twitter
              15 février 2024 à 13:20:22

              Merci à vous 2 pour vos suggestions !
              Concernant "H3title" c'est juste pour mon CSS afin d'avoir un H3 différent.

              @TheTui :
              "Dans ta fonction genererPanneau tu fait parent.innerHTML = '', or dans afficherResultat tu appelles genererPanneau avec economie comme parentID, donc tout ce qu'il y a dans economie est ecrase."


              C'est le but, je veux que lorsque je change un paramètre (nombre de cigarette/cout du paquet/nombre de cigarette par paquet), je clique à nouveau sur le bouton "calculer" et que ça calcul avec ces nouvelles données.

              @Lamecarlate :
              "J'ai encore du mal à comprendre ton code"
              Mon boss m'a demandé de faire une interface type "vieux panneaux sncf" pour faire un affichage un peu moins classique que d'afficher simplement le résultat. Donc évidemment cela à un peu "engorgé" mon code.

              "Je pense que tu remplaces tout le contenu de la div d'id "economie" à un endroit…"

              Alors là, je ne vois pas ce que tu entends par "remplace" ...

              Par contre ce que je ne comprends pas, c'est que le 1er calcul fonctionne parfaitement mais le changement de mes valeurs côté utilisateurs n'est pas pris en compte lors d'un second calcul si je ne passe pas par un F5 ...

              capture d''écran

              -
              Edité par ajja17r 15 février 2024 à 13:26:10

              • Partager sur Facebook
              • Partager sur Twitter
                15 février 2024 à 17:10:47

                Concernant "H3title" c'est juste pour mon CSS afin d'avoir un H3 différent.

                Alors c'est pas comme ça qu'on fait :D tu connais bien les classes CSS puisque tu les utilises autre part. Tu dois avoir un <h3 class="title">, par exemple.

                Alors là, je ne vois pas ce que tu entends par "remplace" ...

                L'explication a été donnée par thetui, je pense. Tu écris tes nouvelles données dans le parent des éléments que tu veux remettre à zéro, et donc… ces éléments n'existent plus.

                • Partager sur Facebook
                • Partager sur Twitter

                Pas d'aide concernant le code par MP, le forum est là pour ça :)

                  16 février 2024 à 9:26:46

                  Bon,
                  J'ai bien compris ce que vous me suggérez, cependant, mon objectif est juste de régénérer le résultat dès lors où l'on change les données utilisateurs.
                  J'ai donc commenté :
                  //document.getElementById('economie').innerHTML = economie
                  Mais l'erreur persiste...
                  Uncaught TypeError: document.getElementById(...) is null

                  Je n'arrive pas à comprendre pourquoi les éléments n'existent plus ou soit null alors que la formule de calcul reste la même.
                  Quelque chose m'échappe, mais bon quand on a la tête dans le guidon, on ne voit pas nécessairement la limpidité utile.
                  Auriez vous une suggestion de code à me proposer afin d'y voir plus clair ?

                  -
                  Edité par ajja17r 16 février 2024 à 13:14:07

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Un bouton pour réinitialiser

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown