1. #1
    Membre habitué
    Inscrit en
    janvier 2008
    Messages
    1 009
    Détails du profil
    Informations forums :
    Inscription : janvier 2008
    Messages : 1 009
    Points : 128
    Points
    128

    Par défaut Ajouter bouton de remise à 0 sur une barre de progression

    Bonjour,

    j'ai installé une barre de progression avec ce site.

    https://scriptscodes.com/daiky00/dem...eatured-YpNqjM

    je souhaiterai intégrer un bouton pour mettre a 0 la valeur des dons si une erreur est faite lors d'un ajout d'un don quelqu'un pourrai-il m'aider ?

    il me semble que c'est donationProgress qui doit revenir à 0.

    Voici le code html:
    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
    <!DOCTYPE html>
    <html >
    <head>
      <meta charset="UTF-8">
      <title>Demo Progress Indicator Donation Featured</title>
     
     
     
          <link rel="stylesheet" href="css/style.css">
     
     
    </head>
     
    <body>
      <html>
     
    <head>
      <title>Demo Donation Progress Indicator Featured</title>
    </head>
     
    <body>
      <main role="main">
        <!-- progress bar -->
        <div class="donation--container">
          <h1 id="donation--user" class="donation--user">Your Progress User</h1>
          <span class="donation--title">Reached:</span>
          <span id="donation--goal" class="donation--goal"></span>
          <div class="donation--bar">
            <div class="donation--rounded">
              <div id="donation--progress" class="donation--progress" style="width: 0;"></div>
            </div>
            <div id="donation--number" class="donation--number" style="left: 0;"></div>
            <span id="donation--status" class="donation--status"></span>
          </div>
          <form class="form--container">
            <input id="donation--amount" class="input" type="number" min="1" placeholder="$ enter amount">
            <input id="donate" class="button" type="submit" value="Donate">
          </form>
        </div>
      </main>
    </body>
     
    </html>
     
        <script src="js/index.js"></script>
     
    </body>
    </html>

    et le javascript :
    Code : 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
    /* Downloaded from https://scriptscodes.com/ */
    				"use strict";
     
    // Function to find percentage
    function percentage(a, b) {
      return a / b * 100 > 100 ? 100 : a / b * 100;
    }
     
    //On Window Load
    window.onload = function() {
     
      //User Object
      var User = {
        name: "Francisco",
        donationCollect: 56,
        donationGoal: 125
      };
     
      // IDs
      var donationUser = document.getElementById("donation--user"),
        donationProgress = document.getElementById("donation--progress"),
        donationNumber = document.getElementById("donation--number"),
        donationGoal = document.getElementById("donation--goal"),
        donationStatus = document.getElementById("donation--status"),
        donationAmount = document.getElementById("donation--amount"),
        donate = document.getElementById("donate");
     
      // How much percent to reach Goal
      var percent = percentage(User.donationCollect, User.donationGoal);
      // What we have so far to reach Goal
      donationProgress.setAttribute("aria-valuenow", User.donationCollect);
      // Goal
      donationProgress.setAttribute("aria-valuemax", User.donationGoal);
     
      // Default Data
      donationUser.innerHTML = "Your Progress <span class='green'>" + User.name + "<span>";
      donationProgress.setAttribute("style", "width:" + percent + "%");
      donationNumber.setAttribute("style", "left:" + percent + "%");
      donationNumber.innerHTML = "$" + User.donationCollect;
      donationGoal.innerHTML = "Goal<br>$" + User.donationGoal;
      donationStatus.innerHTML = "<i class='fa fa-window-close red'></i> You need <span class='red'>$" + (User.donationGoal - User.donationCollect) + "</span> to reach your Donation Goal";
     
      //Events
     
      //Only Positive Numbers allow in the Donation input
      donationAmount.onkeydown = function(e) {
        if (!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode === 8)) {
          return false;
        }
      };
     
      // Onclick event for the donate button
      donate.onclick = function(e) {
        e.preventDefault();
        var newDonationCollect = (+User.donationCollect) + (+donationAmount.value);
        var newPercent = percentage(newDonationCollect, User.donationGoal);
        var newDonationNumber = User.donationCollect != User.donationGoal ? (+User.donationCollect) + (+donationAmount.value) : User.donationGoal;
        User.donationCollect = newDonationNumber;
        donationNumber.innerHTML = "$" + newDonationNumber;
        donationProgress.setAttribute("style", "width:" + newPercent + "%");
        donationNumber.setAttribute("style", "left:" + newPercent + "%");
        donationStatus.innerHTML = User.donationGoal - newDonationNumber > 0 ? "<i class='fa fa-window-close red'></i> You need <span class='red'>$" + (User.donationGoal - newDonationNumber) + "</span> to reach your Donation Goal" : "<i class='fa fa-exclamation-circle green'></i> Your campaign has been funded";
     
      };
     
    };
    Merci pour votre aide.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 681
    Points : 20 993
    Points
    20 993
    Billets dans le blog
    38

    Par défaut



    Un simple "reset" semble faire l'affaire dans mon test :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <form class="form--container">
    	<input id="donation--amount" class="input" type="number" min="1" placeholder="$ enter amount">
    	<input type="reset">
    	<input id="donate" class="button" type="submit" value="Donate">
    </form>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Réponses: 0
    Dernier message: 08/06/2012, 16h23
  2. Afficher un texte sur une barre de progression
    Par defluc dans le forum Composants VCL
    Réponses: 3
    Dernier message: 28/04/2010, 14h18
  3. Ajouter une action sur une barre de menu
    Par alex2746 dans le forum Qt
    Réponses: 2
    Dernier message: 01/04/2010, 15h39
  4. Réponses: 4
    Dernier message: 24/11/2005, 09h34
  5. MapX, Ajouter des bmp et jpeg sur une carte ...
    Par rorodopuis dans le forum C++Builder
    Réponses: 2
    Dernier message: 25/07/2005, 09h07

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