Calcul sur formulaire Calculatrice
PRÉSENTATION: Bonjour à tous voici un premier message de ma part sur ce forum. Je souhaite que les solutions à ce problème puissent aider quelque personne et de même améliorer mon code. Je suis novice en Javascript c'est mon premier code JS que je développe. Je souhaite créer un calculateur mathématique qui calcule un prix d'achat (x) et donne un résultat final automatiquement. J'ai réussi à faire fonctionner le code le tout est ok!
Mais je pense qu'il pourrait y avoir grandement place à l'amélioration. Car là il y a énormément des variables .De plus j'aimerais ajouter que lorsque l'on clique sur un input dans le code une fenêtre qui s'ouvre avec un clavier de chiffre personnalisé pour y inscrire les montants( le calculateur servira pour ios et android app) mais j'aime mieux créer un clavier de chiffres personnalisé.
PROBLÈME A RÉSOUDRE:
1) j'ai dû passer mes calculs par des variables pour pas qu'il y est de chiffre après la virgule (EX: var result1 = vs2.To Fixed(0) Avant de retourner le résultat à l'input (pas très propre je crois).
2) Créer une boîte pop-up pour choisir les montants en clavier pour l'input.
3) Amélioration du code qui je crois n'est pas très propre vus toutes le passage des variables JS, j'imagine qu'il a moyen de simplifier la façon de faire les calculs.
4) j'aimerais que lorsque l'on atterrit sur la page un calcul total soit déjà fait. Je m'explique en ce moment,t temps que l'on n'a pas cliqué sur un des inputs aucun résultat n'est calculé.
5) J'aimerais que les chiffres qui apparaissent dans mes input soit en format $, Car ce sont des montant d'argent donc EX: ne pas écrire 100000$ mais écrire 100 000$.
6) Faire en sorte qu'au click sur <i class="fas fa-minus-circle"></i> | <i class="fas fa-plus-circle"></i> On puissent monter et descendre de 1000 par clique le montant de la input.
Code:
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| <div id="pret" class="container conteneur-calculatrice" style="margin-bottom: 49px">
<div class="row">
<div class="col-xs-12 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>Comparable / Prix de vente</label></div>
<div class="col-xs-2 text-left"><i class="fas fa-minus-circle"></i></div>
<div class="col-xs-8 text-center"><input id="q1" type="number" class="count" name="qty" onfocus="this.value=''" value="280000" onkeyup="total()"></div>
<div class="col-xs-2 text-right"><i class="fas fa-plus-circle"></i></div>
</div>
<div class="col-xs-6 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>5% (Prix affiché sous les comparables</label></div>
<div class="col-xs-12 text-center"><input id="r1" type="number" class="count" readonly="readonly"></div>
</div>
<div class="col-xs-6 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>3% Négociation potentiel</label></div>
<div class="col-xs-12 text-center"><input id="r2" type="number" class="count" readonly="readonly"></div>
</div>
<div class="col-xs-12 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>Frais acquisition (Ass, Notaire, ouverture dossier, etc...)</label></div>
<div class="col-xs-2 text-left"><i class="fas fa-minus-circle"></i></div>
<div class="col-xs-8 text-center"><input id="q2" type="number" class="count" name="qty" onfocus="this.value=''" value="10000" onkeyup="total()"></div>
<div class="col-xs-2 text-right"><i class="fas fa-plus-circle"></i></div>
</div>
<div class="col-xs-12 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>Coût des rénovations</label></div>
<div class="col-xs-2 text-left"><i class="fas fa-minus-circle"></i></div>
<div class="col-xs-8 text-center"><input id="q3" type="number" class="count" name="qty" onfocus="this.value=''" value="20000" onkeyup="total()"></div>
<div class="col-xs-2 text-right"><i class="fas fa-plus-circle"></i></div>
</div>
<div class="col-xs-5 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>% Courtier</label></div>
<div class="col-xs-1 text-left"><i class="fas fa-minus-circle"></i></div>
<div class="col-xs-4 text-center"><input id="q4" type="number" class="count" name="qty" value="4" onkeyup="total()"></div>
<div class="col-xs-1 text-right"><i class="fas fa-plus-circle"></i></div>
</div>
<div class="col-xs-5 bloc-calculatrice" style="background:ff5d00;">
<div class="col-xs-12"><label>% Profit désiré</label></div>
<div class="col-xs-1 text-left"><i class="fas fa-minus-circle"></i></div>
<div class="col-xs-4 text-center"><input id="q5" type="number" class="count" name="qty" value="20" onkeyup="total()"></div>
<div class="col-xs-1 text-right"><i class="fas fa-plus-circle"></i></div>
</div>
<div class="col-xs-12 bloc-calculatrice" style="background:ff5d00">
<div class="col-xs-12"><label>Prix cédations promesse d'achat désirée</label></div>
<div class="col-xs-2 text-left"><i class="fas fa-minus-circle"></i></div>
<div class="col-xs-8 text-center"><input id="q6" type="number" class="count" name="qty" value="" onkeyup="total()"></div>
<div class="col-xs-2 text-right"><i class="fas fa-plus-circle"></i></div>
</div>
<div class="col-xs-12 bloc-calculatrice lime-background result">
<div class="col-xs-12 text-center"><label>Frais de courtier</label></div>
<div class="col-xs-12 text-center"><input id="r3" type="number" class="count" readonly="readonly"></div>
</div>
<div class="col-xs-12 bloc-calculatrice vert-background result">
<div class="col-xs-12 text-center"><label>Profit potentiel sur transaction</label></div>
<div class="col-xs-12 text-center"><input id="r4" type="number" class="count" onchange="setTwoNumberDecimal(this)" readonly="readonly"></div>
</div>
<div class="col-xs-12 bloc-calculatrice lime-background result">
<div class="col-xs-12 text-center"><label>Total à payer</label></div>
<div class="col-xs-12 text-center"><input id="r5" type="number" class="count" readonly="readonly"></div>
</div>
</div>
</div>
<script language="JavaScript">
function total() {
var vq1 = document.getElementById('q1');
var vq2 = document.getElementById('q2');
var vq3 = document.getElementById('q3');
var vq4 = document.getElementById('q4');
var vq5 = document.getElementById('q5');
var vq6 = document.getElementById('q6');
var calcul1 = document.getElementById('r1');
var calcul2 = document.getElementById('r2');
var calcul3 = document.getElementById('r3');
var calcul4 = document.getElementById('r4');
var calcul5 = document.getElementById('r5');
var vs1 = vq1.value * 0.05;
var vs2 = vq1.value - vs1;
var vs3 = vs2 * 0.05;
var vs4 = vs2 - vs3;
var vs5 = vq4.value / 100;
var vs6 = vs4 * vs5;
var vs7 = vs4 - vs6;
var vs8 = vq5.value / 100;
var vs9 = vs7 * vs8;
var vs10 = vs4 - vs6 - vs9 - vq2.value - vq3.value - vq6.value;
var result1 = vs2.toFixed(0);
var result2 = vs4.toFixed(0);
var result3 = vs6.toFixed(0);
var result4 = vs9.toFixed(0);
var result5 = vs10.toFixed(0);
calcul1.value = result1;
calcul2.value = result2;
calcul3.value = result3;
calcul4.value = result4;
calcul5.value = result5;
}
</script>
<script>
function setTwoNumberDecimal(el) {
el.value = parseFloat(el.value).toFixed(2);
};
</script> |
Je vous en demande énormément mais je veut essayer de comprendre.
Votre aide sera d'une grande utilité Merci à tous à l'avance!!!
