IONIC Section 4 - 4.15 Terminer la logique JavaScript de base
Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !Dans cette vidéo, nous finalisons la logique JavaScript de notre plan budgétaire. Le but : nettoyer les champs après chaque ajout, faire fonctionner le bouton « effacer » et afficher en bas de l'application un total des dépenses qui se met à jour automatiquement.
Vider les champs et brancher le bouton Annuler
Dans app.js, on crée une fonction clear qui remet les deux champs de saisie à une chaîne vide :
const clear = () => {
reasonInput.value = '';
amountInput.value = '';
};
On l'appelle juste après l'ajout d'un nouvel élément à expensesList, puis on la branche aussi sur le bouton d'annulation. Attention : on passe la référence à la fonction, pas son exécution immédiate :
cancelBtn.addEventListener('click', clear);En rechargeant l'app, saisir « facture » à 15 puis cliquer sur « effacer » vide bien les deux champs.
Reste à afficher le total des dépenses. Côté HTML, on ajoute une nouvelle <ion-row> avec un paragraphe « Dépenses totales : » suivi d'un <span id="total-expenses"></span> qui servira de crochet pour le rendu. Côté JavaScript, on récupère le span avec const totalExpensesOutput = document.querySelector('#total-expenses'); et on initialise un compteur let totalExpenses = 0;.
À chaque ajout d'entrée, on cumule la valeur saisie en la convertissant en nombre grâce au + unaire (totalExpenses += +enteredAmount;) — sans cela, l'opérateur += concaténerait les chaînes au lieu d'additionner. On écrit ensuite le total dans le DOM via totalExpensesOutput.textContent = totalExpenses; pour que la valeur ne reste pas uniquement en mémoire JavaScript.
Après rechargement, saisir une facture de 6 € puis une dépense « cinéma » de 8 € fait apparaître le total juste en dessous. Le style peut encore être amélioré, notamment sur grand écran : c'est ce que nous verrons dans la prochaine vidéo.
En résumé
Cette leçon finalise la logique JavaScript de base pour une application de gestion de dépenses. Elle couvre la création d'une fonction clear() pour réinitialiser les champs de saisie, l'ajout d'un event listener sur le bouton d'annulation, et l'implémentation d'un calcul dynamique du total des dépenses affichées en bas de l'application. Le contenu montre également comment convertir les valeurs string en number pour effectuer correctement les opérations arithmétiques et mettre à jour le DOM en temps réel.
Points clés
- Créer une fonction clear() qui réinitialise les champs input.value à une chaîne vide pour nettoyer les saisies utilisateur
- Utiliser addEventListener sur le bouton cancel pour attacher un event listener au clic et exécuter la fonction clear() dynamiquement
- Initialiser une variable totalExpenses à 0 et l'incrémenter avec l'opérateur += à chaque ajout de dépense
- Convertir les valeurs string extraites de input.value en number avec l'opérateur unaire + pour éviter la concaténation au lieu de l'addition
- Accéder et mettre à jour l'élément DOM affichant le total avec document.querySelector() et textContent pour refléter les changements en temps réel
- Placer l'affichage du total dans une nouvelle rangée HTML avec un span utilisant un identifiant ou data-attribute pour faciliter l'accès JavaScript
Questions fréquentes
Comment créer une fonction qui efface les entrées de dépense saisies par l'utilisateur?
Créer une fonction clear() qui réinitialise input.value = '' pour tous les champs d'entrée, puis l'attacher au bouton cancel avec addEventListener('click', clear) pour l'exécuter au clic.
Pourquoi est-il nécessaire de convertir la valeur en number avant de l'ajouter au total des dépenses?
Parce que input.value retourne une string par défaut. Sans conversion, JavaScript concatène les chaînes au lieu d'additionner les nombres. L'opérateur unaire + (ex: +input.value) force la conversion string → number.
Comment afficher le total des dépenses mis à jour en temps réel dans l'interface utilisateur?
Déclarer une variable totalExpenses initialisée à 0, l'incrémenter avec += à chaque ajout, puis mettre à jour le DOM avec document.querySelector('#totalExpenses').textContent = totalExpenses pour afficher le changement immédiatement.