Calcul sur formulaire Calculatrice

**drenix** · 27/12/2018, 16h29

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 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
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!!!

**NoSmoking** · 28/12/2018, 17h07

Bonjour et bienvenue sur DVP.

Trop de questions dans ton post pour que tu espères une réponse claire sur toutes.

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous.

**badaze** · 28/12/2018, 17h33

Pour ce qui est des variables et du nombre de lignes tu peux faire de la manière suivante.

Code javascript :

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
    function total() {
        var vq1 = document.getElementById('q1').value;
        var vq2 = document.getElementById('q2').value;
        var vq3 = document.getElementById('q3').value;
        var vq4 = document.getElementById('q4').value;
        var vq5 = document.getElementById('q5').value;
        var vq6 = document.getElementById('q6').value;
 
        var vs2 = vq1 * 0.95; // var vs1 = vq1 * 0.05; // var vs2 = vq1 - vs1;
        var vs4 = vs2 * 0.95; // var vs3 = vs2 * 0.05; // var vs4 = vs2 - vs3;  
        var vs5 = vq4 / 100;
        var vs6 = vs4 * vs5;
        var vs7 = vs4 - vs6;
        var vs8 = vq5 / 100;
        var vs9 = vs7 * vs8;
        var vs10 = vs4 - vs6 - vs9 - vq2 - vq3 - vq6;
 
        document.getElementById('r1').value = vs2.toFixed(0);
        document.getElementById('r2').value = vs4.toFixed(0);
        document.getElementById('r3').value = vs6.toFixed(0);
        document.getElementById('r4').value = vs9.toFixed(0);
        document.getElementById('r5').value = vs10.toFixed(0);
    }

Calcul sur formulaire Calculatrice

JavaScript

Vue hybride

Discussions similaires

Partager

Partager