Ajouter bouton de remise à 0 sur une barre de progression

**kate59** · 10/08/2017, 17h03

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.

**danielhagnoul** · 10/08/2017, 22h23

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>

Ajouter bouton de remise à 0 sur une barre de progression

JavaScript

Discussions similaires

Partager

Partager