Résultat de certains calculs ne s'affichent pas

Invité · 22/12/2018, 12h56

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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale_1">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/carousel.css">
    <title>Comptabilité</title>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function Calculer() {
            document.getElementById("fondsnet").value = document.getElementById("fondsbrut").value - document.getElementById("fondsamortdeduire").value;
            document.getElementById("autrenet").value = document.getElementById('autrebrut').value - document.getElementById("autreamortdeduire").value;
            document.getElementById("immocorponet").value = document.getElementById('immocorpobrut').value - document.getElementById("immocorpoamortdeduire").value;
            document.getElementById("immofinannet").value = document.getElementById('immofinanbrut').value - document.getElementById("immofinanamortdeduire").value;
            document.getElementById("tota1brut").value = parseFloat(document.getElementById("fondsnet").value) + parseFloat(document.getElementById("autrenet").value) + parseFloat(document.getElementById("immocorponet").value) + parseFloat(document.getElementById("immofinannet").value);
            document.getElementById("tota1amortdeduire").value = parseFloat(document.getElementById("fondsamortdeduire").value) + parseFloat(document.getElementById("autreamortdeduire").value) + parseFloat(document.getElementById("immocorpoamortdeduire").value) + parseFloat(document.getElementById("immofinanamortdeduire").value);
            document.getElementById("tota1net").value = parseFloat(document.getElementById("fondsnet").value) + parseFloat(document.getElementById("autrenet").value) + parseFloat(document.getElementById("immocorponet").value) + parseFloat(document.getElementById("immofinannet").value);
            document.getElementById("totalnet_1").value = parseFloat(document.getElementById("fondsnet_1").value) + parseFloat(document.getElementById("autrenet_1").value) + parseFloat(document.getElementById("immocorponet_1").value) + parseFloat(document.getElementById("immofinannet_1").value);
            document.getElementById("stocksnet").value = document.getElementById("stocksbrut").value - document.getElementById("stocksamortdeduire").value;
            document.getElementById("msesnet").value = document.getElementById("msesbrut").value - document.getElementById("msesnet").value;
            document.getElementById("avancesnet").value = document.getElementById("avancesbrut").value - document.getElementById("avancesamortdeduire").value;
            document.getElementById("tota11exercicen").value = parseFloat(document.getElementById("capitaln").value) + parseFloat(document.getElementById("ecartsn").value) + parseFloat(document.getElementById("reservelegalen").value) + parseFloat(document.getElementById("reserveregn").value) + parseFloat(document.getElementById("autresn").value) + parseFloat(document.getElementById("reportn").value) + parseFloat(document.getElementById("resultatn").value) + parseFloat(document.getElementById("provregn").value);
            document.getElementById("total1exercicen_1").value = parseFloat(document.getElementById("capitaln_1").value) + parseFloat(document.getElementById("ecartsn_1").value) + parseFloat(document.getElementById("reservelegalen_1").value) + parseFloat(document.getElementById("reserveregn_1").value) + parseFloat(document.getElementById("autresn_1").value) + parseFloat(document.getElementById("reportn_1").value) + parseFloat(document.getElementById("resultatn_1").value) + parseFloat(document.getElementById("provregn_1").value);
            document.getElementById("clientsnetn").value = document.getElementById("clientsbrutn").value - document.getElementById("clientsamortdeduiren").value;
            document.getElementById("autrescreancesnetn").value = document.getElementById("autrescreancesbrutn").value - document.getElementById("autrescreancesamortdeduiren").value;
            document.getElementById("vmpnetn").value = document.getElementById("vmpbrutn").value - document.getElementById("vmpamortdeduiren").value;
            document.getElementById("disponibilitesnet").value = document.getElementById("disponibilitesbrut").value - document.getElementById("disponibilitesamortdeduire").value;
            document.getElementById("caissenet").value = document.getElementById("caissebrut").value - document.getElementById("caisseamortdeduire").value;
            document.getElementById("total2brut").value = parseFloat(document.getElementById("stocksbrut").value) + parseFloat(document.getElementById("msesbrut").value) + parseFloat(document.getElementById("avancesbrut").value) + parseFloat(document.getElementById("clientsbrutn").value) + parseFloat(document.getElementById("autrescreancesbrutn").value) + parseFloat(document.getElementById("vmpbrutn").value) + parseFloat(document.getElementById("disponibilitesbrut").value) + parseFloat(document.getElementById("caissebrut").value);
            document.getElementById("total2amortdeduire").value = parseFloat(document.getElementById("stocksamortdeduire").value) + parseFloat(document.getElementById("msesamortdeduire").value) + parseFloat(document.getElementById("avancesamortdeduire").value) + parseFloat(document.getElementById("clientsamortdeduiren").value) + parseFloat(document.getElementById("autrescreancesamortdeduiren").value) + parseFloat(document.getElementById("vmpamortdeduiren").value) + parseFloat(document.getElementById("disponibilitesamortdeduire").value) + parseFloat(document.getElementById("caissenet").value);
            document.getElementById("total2net").value = parseFloat(document.getElementById("stocksnet").value) + parseFloat(document.getElementById("msesnet").value) + parseFloat(document.getElementById("avancesnet").value) + parseFloat(document.getElementById("clientsnetn").value) + parseFloat(document.getElementById("autrescreancesnetn").value) + parseFloat(document.getElementById("vmpnetn").value) + parseFloat(document.getElementById("disponibilitesnet").value) + parseFloat(document.getElementById("caissenet").value);
            document.getElementById("total2net_1").value = parseFloat(document.getElementById("stocksnet_1").value) + parseFloat(document.getElementById("msesnet_1").value) + parseFloat(document.getElementById("avancesnet_1").value) + parseFloat(document.getElementById("clientsnetn_1").value) + parseFloat(document.getElementById("autrescreancesnetn_1").value) + parseFloat(document.getElementById("vmpnetn_1").value) + parseFloat(document.getElementById("disponibilitesnet_1").value) + parseFloat(document.getElementById("caissenet_1").value);
            document.getElementById("total3n").value = parseFloat(document.getElementById("empruntsn").value) + parseFloat(document.getElementById("avancesrecuesn").value) + parseFloat(document.getElementById("frsn").value) + parseFloat(document.getElementById("autresdettesn").value);
            document.getElementById("total3n_1").value = parseFloat(document.getElementById("empruntsn_1").value) + parseFloat(document.getElementById("avancesrecuesn_1").value) + parseFloat(document.getElementById("frsn_1").value) + parseFloat(document.getElementById("autresdettesn_1").value);
            document.getElementById("ccanet").value = document.getElementById("ccabrut").value - document.getElementById("ccaamortdeduire").value;
            document.getElementById("totalgeneralbrut").value = parseFloat(document.getElementById("tota1brut").value) + parseFloat(document.getElementById("total2brut").value) + parseFloat(document.getElementById("ccabrut").value);
            document.getElementById("totalgeneralamortdeduire").value = parseFloat(document.getElementById("tota1amortdeduire").value) + parseFloat(document.getElementById("total2amortdeduire").value) + parseFloat(document.getElementById("ccaamortdeduire").value);
            document.getElementById("totalgeneralnet").value = parseFloat(document.getElementById("tota1net").value) + parseFloat(document.getElementById("total2net").value) + parseFloat(document.getElementById("ccanet").value);
            document.getElementById("totalgeneralnet_1").value = parseFloat(document.getElementById("totalnet_1").value) + parseFloat(document.getElementById("total2net_1").value) + parseFloat(document.getElementById("ccanet_1").value);
            document.getElementById("totalgeneraln").value = parseFloat(document.getElementById("tota11exercicen").value) +parseFloat(document.getElementById("provrisquesn").value) + parseFloat(document.getElementById("total3n").value) + parseFloat(document.getElementById("pcan").value);
            document.getElementById("totalgeneraln_1").value = parseFloat(document.getElementById("total1exercicen_1").value) +parseFloat(document.getElementById("provrisquesn_1").value) + parseFloat(document.getElementById("total3n_1").value) + parseFloat(document.getElementById("pcan_1").value);
        }
 
    </script>
</head>
 
<body>
    <div id="bilan">
        <div class="container">
            <h1 style="font-size:25px;text-align:center;color:black;">Bilan</h1>
            <h6 style="text-align:center;color:black;">Système abrégée (avant répartition)</h6>
            <input type="button" value="Calculer" onclick="Calculer();">
            <form name="bilan" action="#">
                <table>
                    <thead>
                        <tr>
                            <th rowspan="2" id="titre">ACTIF</th>
                            <th colspan="3">Exercice N</th>
                            <th>Exercice N-1</th>
                            <th rowspan="2" id="titre">PASSIF</th>
                            <th rowspan="2">Exercice N</th>
                            <th rowspan="2">Exercice N-1</th>
                        </tr>
                        <th>Brut</th>
                        <th>Amortissments et provisions (à déduire)</th>
                        <th>Net</th>
                        <th>Net</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" id="title">Actif immobilisé</td>
                            <td colspan="3" id="title">Capitaux propres</td>
                        </tr>
                        <tr>
                            <td colspan="5" id="title">Immobilisations incorporelles</td>
                            <td>Capital</td>
                            <td>
                                <input type="text" id="capitaln" name="capitaln">
                            </td>
                            <td>
                                <input type="text" id="capitaln_1" name="capitaln_1">
                            </td>
                        </tr>
                        <tr>
                            <td>- fonds commercial</td>
                            <td>
                                <input type="text" id="fondsbrut" name="fondsbrut">
                            </td>
                            <td>
                                <input type="text" id="fondsamortdeduire" name="fondsamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="fondsnet" name="fondsnet">
                            </td>
                            <td>
                                <input type="text" id="fondsnet_1" name="fondsnet_1">
                            </td>
                            <td>Ecarts de réévaluations</td>
                            <td>
                                <input type="text" id="ecartsn" name="ecartsn">
                            </td>
                            <td>
                                <input type="text" id="ecartsn_1" name="ecartsn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>- autre</td>
                            <td>
                                <input type="text" id="autrebrut" name="autrebrut">
                            </td>
                            <td>
                                <input type="text" id="autreamortdeduire" name="autreamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="autrenet" name="autrenet">
                            </td>
                            <td>
                                <input type="text" id="autrenet_1" name="autrenet_1">
                            </td>
                            <td colspan="3" id="title">Réserves</td>
                        </tr>
                        <tr>
                            <td id="title">Immobilisations corporelles</td>
                            <td>
                                <input type="text" id="immocorpobrut" name="immocorpobrut">
                            </td>
                            <td>
                                <input type="text" id="immocorpoamortdeduire" name="immocorpoamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="immocorponet" name="immocorponet">
                            </td>
                            <td>
                                <input type="text" id="immocorponet_1" name="immocorponet_1">
                            </td>
                            <td>- réserve légale</td>
                            <td>
                                <input type="text" id="reservelegalen" name="reservelegalen">
                            </td>
                            <td>
                                <input type="text" id="reservelegalen_1" name="reservelegalen_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Immobilisations financières</td>
                            <td>
                                <input type="text" id="immofinanbrut" name="immofinanbrut">
                            </td>
                            <td>
                                <input type="text" id="immofinanamortdeduire" name="immofinanamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="immofinannet" name="immofinannet">
                            </td>
                            <td>
                                <input type="text" id="immofinannet_1" name="immofinannet_1">
                            </td>
                            <td>- réserves réglementées</td>
                            <td>
                                <input type="text" id="reserveregn" name="reserveregn">
                            </td>
                            <td>
                                <input type="text" id="reserveregn_1" name="reserveregn_1">
                            </td>
                        </tr>
                        <tr>
                            <td id="total">Total I</td>
                            <td>
                                <input type="text" id="tota1brut" name="tota1brut">
                            </td>
                            <td>
                                <input type="text" id="tota1amortdeduire" name="tota1amortdeduire">
                            </td>
                            <td>
                                <input type="text" id="tota1net" name="tota1net">
                            </td>
                            <td>
                                <input type="text" id="totalnet_1" name="totalnet_1">
                            </td>
                            <td>- autres</td>
                            <td>
                                <input type="text" id="autresn" name="autresn">
                            </td>
                            <td>
                                <input type="text" id="autresn_1" name="autresn_1">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5" id="title">Actif cirulant</td>
                            <td>Report à nouveau</td>
                            <td>
                                <input type="text" id="reportn" name="reportn">
                            </td>
                            <td>
                                <input type="text" id="reportn_1" name="reportn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Stocks et en-cours (autres que marchandises)</td>
                            <td>
                                <input type="text" id="stocksbrut" name="stocksbrut">
                            </td>
                            <td>
                                <input type="text" id="stocksamortdeduire" name="stocksamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="stocksnet" name="stocksnet">
                            </td>
                            <td>
                                <input type="text" id="stocks_1" name="stocks_1">
                            </td>
                            <td>Résultat de l'exercice (bénéfice ou perte)</td>
                            <td>
                                <input type="text" id="resultatn" name="resultatn">
                            </td>
                            <td>
                                <input type="text" id="resultatn_1" name="resultatn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Marchandises</td>
                            <td>
                                <input type="text" id="msesbrut" name="msesbrut">
                            </td>
                            <td>
                                <input type="text" id="msesamortdeduire" name="msesamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="msesnet" name="msesnet">
                            </td>
                            <td>
                                <input type="text" id="msesn_1" name="msesn_1">
                            </td>
                            <td>Provisions réglementées</td>
                            <td>
                                <input type="text" id="provregn" name="provregn">
                            </td>
                            <td>
                                <input type="text" id="provregn_1" name="provregn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Avances et acomptes versés sur commande</td>
                            <td>
                                <input type="text" id="avancesbrut" name="avancesbrut">
                            </td>
                            <td>
                                <input type="text" id="avancesamortdeduire" name="avancesamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="avancesnet" name="avancesnet">
                            </td>
                            <td>
                                <input type="text" id="avances_1" name="avances_1">
                            </td>
                            <td id="total">Total I</td>
                            <td>
                                <input type="text" id="tota11exercicen" name="total1exercicen">
                            </td>
                            <td>
                                <input type="text" id="total1exercicen_1" name="total1exercicen_1">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5" id="title">Créances</td>
                            <td>Provisions pour risques et charges <strong>(II)</strong></td>
                            <td>
                                <input type="text" id="provrisquesn" name="provrisquesn">
                            </td>
                            <td>
                                <input type="text" id="provrisquesn_1" name="provrisquesn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>- clients et comptes rattachés</td>
                            <td>
                                <input type="text" id="clientsbrutn" name="clientsbrutn">
                            </td>
                            <td>
                                <input type="text" id="clientsamortdeduiren" name="clientsamortdeduiren">
                            </td>
                            <td>
                                <input type="text" id="clientsnetn" name="clientsnetn">
                            </td>
                            <td>
                                <input type="text" id="clientsn_1" name="clientsn_1">
                            </td>
                            <td colspan="2" id="title">Dettes</td>
                        </tr>
                        <tr>
                            <td>- autres</td>
                            <td>
                                <input type="text" id="autrescreancesbrutn" name="autrescreancesbrutn">
                            </td>
                            <td>
                                <input type="text" id="autrescreancesamortdeduiren" name="autrescreancesamortdeduiren">
                            </td>
                            <td>
                                <input type="text" id="autrescreancesnetn" name="autrescreancesnetn">
                            </td>
                            <td>
                                <input type="text" id="autrescreancesn_1" name="autrescreancesn_1">
                            </td>
                            <td>Emprunts et dettes assimilées</td>
                            <td>
                                <input type="text" id="empruntsn" name="empruntsn">
                            </td>
                            <td>
                                <input type="text" id="empruntsn_1" name="empruntsn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Valeurs mobilières de placement</td>
                            <td>
                                <input type="text" id="vmpbrutn" name="vmpbrutn">
                            </td>
                            <td>
                                <input type="text" id="vmpamortdeduiren" name="vmpamortdeduiren">
                            </td>
                            <td>
                                <input type="text" id="vmpnetn" name="vmpnetn">
                            </td>
                            <td>
                                <input type="text" id="vmpn_1" name="vmpn_1">
                            </td>
                            <td>Avances et acomptes reçues sur commandes en cours</td>
                            <td>
                                <input type="text" id="avancesrecuesn" name="avancesrecuesn">
                            </td>
                            <td>
                                <input type="text" id="avancesrecuesn_1" name="avancesrecuesn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Disponibilités (autres que caisse)</td>
                            <td>
                                <input type="text" id="disponibilitesbrut" name="disponibilitesbrut">
                            </td>
                            <td>
                                <input type="text" id="disponibilitesamortdeduire" name="disponibilitesamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="disponibilitesnet" name="disponibilitesnet">
                            </td>
                            <td>
                                <input type="text" id="disponibilitesnet_1" name="disponibilitesnet_1">
                            </td>
                            <td>Fournisseurs et comptes rattachés</td>
                            <td>
                                <input type="text" id="frsn" name="frsn">
                            </td>
                            <td>
                                <input type="text" id="frsn_1" name="frsn_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Caisse</td>
                            <td>
                                <input type="text" id="caissebrut" name="caissebrut">
                            </td>
                            <td>
                                <input type="text" id="caisseamortdeduire" name="caisseamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="caissenet" name="caissenet">
                            </td>
                            <td>
                                <input type="text" id="caissenet_1" name="caissenet_1">
                            </td>
                            <td>Autres</td>
                            <td>
                                <input type="text" id="autresdettesn" name="autresdettesn">
                            </td>
                            <td>
                                <input type="text" id="autresdettesn_1" name="autresdettesn_1">
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Total II</strong></td>
                            <td>
                                <input type="text" id="total2brut" name="total2brut">
                            </td>
                            <td>
                                <input type="text" id="total2amortdeduire" name="total2amortdeduire">
                            </td>
                            <td>
                                <input type="text" id="total2net" name="total2net">
                            </td>
                            <td>
                                <input type="text" id="total2net_1" name="total2net_1">
                            </td>
                            <td><strong>Total III</strong></td>
                            <td>
                                <input type="text" id="total3n" name="total3n">
                            </td>
                            <td>
                                <input type="text" id="total3n_1" name="total3n_1">
                            </td>
                        </tr>
                        <tr>
                            <td>Charges constatées d'avance <strong>(III)</strong></td>
                            <td>
                                <input type="text" id="ccabrut" name="ccabrut">
                            </td>
                            <td>
                                <input type="text" id="ccaamortdeduire" name="ccaamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="ccanet" name="ccanet">
                            </td>
                            <td>
                                <input type="text" id="ccanet_1" name="ccanet_1">
                            </td>
                            <td>Produits constatées d'avance <strong>(IV)</strong></td>
                            <td>
                                <input type="text" id="pcan" name="pcaen">
                            </td>
                            <td>
                                <input type="text" id="pcan_1" name="pcan_1">
                            </td>
                        </tr>
                        <tr>
                            <td id="total">TOTAL GENERAL (I + II + III)</td>
                            <td>
                                <input type="text" id="totalgeneralbrut" name="totalgeneralbrut">
                            </td>
                            <td>
                                <input type="text" id="totalgeneralamortdeduire" name="totalgeneralamortdeduire">
                            </td>
                            <td>
                                <input type="text" id="totalgeneralnet" name="totalgeneralnet">
                            </td>
                            <td>
                                <input type="text" id="totalgeneralnet_1" name="totalgeneralnet_1">
                            </td>
                            <td id="total">TOTAL GENERAL (I + II + III + IV)</td>
                            <td>
                                <input type="text" id="totalgeneraln" name="totalgeneraln">
                            </td>
                            <td>
                                <input type="text" id="totalgeneraln_1" name="totalgeneraln_1">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
    <script type="application/javascript" src="../js/jquery-3.3_1.min.js"></script>
    <script src="../js/script.js"></script>
</body>
 
</html>

Les résultats qui sont entourés ne s'affichent pas. Est-ce une erreur de syntaxe que je ne vois plus ?

Nom : total.jpg
Affichages : 259
Taille : 284,6 Ko

Deuxième chose, je souhaite également insérer les données saisies dans une BDD en sachant que les noms des différentes rubriques sont entre les balises <td> comme par exemple "capital". Dans le but de pouvoir les utiliser dans un autre fichier.

Merci d'avance

**Watilin** · 22/12/2018, 16h10

Envoyé par mike711

Les résultats qui sont entourés ne s'affichent pas. Est-ce une erreur de syntaxe que je ne vois plus ?

Ne compte pas uniquement sur tes yeux pour repérer les erreurs de syntaxe

Pour t’aider, il y a la console JavaScript, disponible sur tous les navigateurs : appuie sur F12 et active l’onglet « console » (s’il n’est pas déjà actif). S’il y a des erreurs, des messages apparaîtront dans la console.

Pour ta deuxième question, il faut commencer par envoyer les données au serveur. Pour ça, je te propose deux façons de faire :

La première, c’est d’envoyer le formulaire de façon classique, sans JavaScript, avec un bouton <input type="submit">. Il faudra modifier l’attribut action de ton formulaire pour envoyer les données au script en langage serveur (PHP ou autre) qui sera chargé de sanifier les données et de les insérer dans la base.
Dans la mesure où tous les inputs ont déjà un name, tu n’as rien à rajouter.

La seconde solution est d’envoyer les données par ajax. Un objet FormData est capable de repérer tous les éléments ayant un name et de les sérialiser. Le gros du travail est de gérer la réponse du serveur et les cas d’erreur, mais si tu as déjà fait des requêtes ajax, tu sais comment ça marche. Voici un exemple de code vanilla (sans framework jQuery ou autre) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="ajax-button">Envoyer</button>

Code js :

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
document.getElementById("ajax-button").addEventListener("click", function (event) {
  // évite des envois multiples si le bouton est cliqué plusieurs fois de suite
  let button = this;
  button.disabled = true;
 
  let bilan = document.querySelector("form[name='bilan']");
  let req = new XMLHttpRequest();
 
  // copie les attributs du formulaire
  req.open(bilan.method, bilan.action);
  req.setRequestHeader("Content-Type", bilan.enctype);
 
  // succès ajax. Ne veut pas forcément dire succès du serveur, ex. une 404 est un succès ajax
  req.onload = function () {
    console.log(req.status, req.statusText);
    console.log(req.getResponseHeader("Content-Type"));
    console.log(req.response);
  };
 
  // erreur ajax, généralement un problème de connexion
  req.onerror = function () {
    console.error("erreur ajax");
    alert("bla bla vérifiez votre connexion et réessayez bla bla.");
  };
 
  // évènement lancé dans tous les cas, succès ou erreur
  req.onloadend = function () {
    // réactive le bouton
    button.disabled = false;
  };
 
  // envoi de la requête
  let bilanFormData = new FormData(bilan);
  req.send(bilanFormData);
});

En parallèle, il faut créer le script serveur s’il n’existe pas déjà, mais on va garder ça pour plus tard

Invité · 22/12/2018, 16h58

Je n'ai aucune erreur dans la console.

Pour le reste, je regarderais plus tard car je n'ai pas le temps aujourd'hui.

**danielhagnoul** · 23/12/2018, 19h57

Un rapide coup d'oeil m'a fait pensé à un problème d'ID, et une vérification de votre code HTML dans ma page de test n'a laissé aucun doute : ID multiple alors qu'un ID doit être unique dans la page web.

Console (touche F12) :

dvjhUtilities-1.8.4.js:518
Il existe 2 exemplaires de l'ID titre. Il n'est pas unique !

Il existe 8 exemplaires de l'ID title. Il n'est pas unique !

Il existe 4 exemplaires de l'ID total. Il n'est pas unique !

La méthode getElementById() retourne un objet JS qui représente l'élément du DOM auquel son sélecteur (un ID) se réfère. Si le DOM ne change pas, cette référence peut être mise dans une constante. On se servira de cette constante pour interroger l'état et la valeur (dans le cas d'un input) de cet élément du DOM.

Exemple avec querySelector( selector) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const 
    elemFondsNet = document.querySelector('#fondsnet'),
    elemFondsBrut = document.querySelector('#fondsbrut'),
    elemFondsAmortDeduire = document.querySelector('#fondsamortdeduire');
 
elemFondsNet.value = Number(elemFondsBrut.value) - Number(elemFondsAmortDeduire.value);

Invité · 24/12/2018, 17h01

Ma console ne m'indique aucune erreur à ce niveau-là, que ce soit sous Firefox ou sous Chrome. Apparemment, ta page de test n'est pas aussi efficace que tu le penses. Désolé de te le dire.

**tsuji** · 24/12/2018, 20h01

Vous nous avez montré ça --- j'ai fait éditer en fournissant des line-breaks pour voir plus clairement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
document.getElementById("total2net_1").value = 
    parseFloat(document.getElementById("stocksnet_1").value) + 
    parseFloat(document.getElementById("msesnet_1").value) + 
    parseFloat(document.getElementById("avancesnet_1").value) + 
    parseFloat(document.getElementById("clientsnetn_1").value) + 
    parseFloat(document.getElementById("autrescreancesnetn_1").value) + 
    parseFloat(document.getElementById("vmpnetn_1").value) + 
    parseFloat(document.getElementById("disponibilitesnet_1").value) + 
    parseFloat(document.getElementById("caissenet_1").value);

Je cheche partout et je ne vois que des éléments certainement bien voulus avec leur id comme suite :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
document.getElementById("total2net_1").value = 
    parseFloat(document.getElementById("stocks_1").value) + 
    parseFloat(document.getElementById("msesn_1").value) + 
    parseFloat(document.getElementById("avances_1").value) + 
    parseFloat(document.getElementById("clientsn_1").value) + 
    parseFloat(document.getElementById("autrescreancesn_1").value) + 
    parseFloat(document.getElementById("vmpn_1").value) + 
    parseFloat(document.getElementById("disponibilitesnet_1").value) + 
    parseFloat(document.getElementById("caissenet_1").value);

Vous avez changé les règles au cours du temps (?) pour le plupart d'eux en enlevant la particule "net" mais pas tous tout de même ! Avec les éléments proprement identifiés, le calcul devrait marcher ...

Invité · 01/01/2019, 11h33

J'ai trouvé pourquoi certains résultats ne s'affichaient pas, il me manquait tout bêtement des parseFloat dans certaines formules de calcul.

**SpaceFrog** · 02/01/2019, 13h36

Ma console ne m'indique aucune erreur à ce niveau-là,

Cela n'empeche pas qu'avoir des duplications d'id sur une page est une hérésie ...

Apparemment, ta page de test n'est pas aussi efficace que tu le penses. Désolé de te le dire.

C'est mignon , j'ai ri ...

**Watilin** · 02/01/2019, 18h05

Envoyé par SpaceFrog

Cela n'empeche pas qu'avoir des duplications d'id sur une page est une hérésie ...

« Un id doit être unique dans une page web » est un des cas les plus flagrants d’argument d’autorité dans le développement web. Tout le monde critique mais personne n’explique, à part que « c’est écrit dans la spec ». Les réponses à cette question StackOverflow frisent le comique de répétition (et la seule réponse qui tente d’apporter des éléments de réflexion a un score négatif

).

Également sur cette conversation StackExchange, une liste d’arguments dont les deux premiers points valent de l’or :

It makes me cry
It's invalid
Many javascript libraries will not work as expected
It makes your code confusing

À noter que les points 3 et 4 sont parfaitement pertinents.

Dans la pratique, utiliser plusieurs fois le même id ça marche (souvent), et les débutantes et les débutants ne comprennent pas pourquoi c’est une mauvaise pratique.

Alors il faut poser deux questions :

pourquoi ça marche ;
pourquoi on me dit que c’est mal.

Pourquoi ça marche ?
Parce que les développeuses et développeurs de navigateurs savent que le web est fait par des gens qui font des erreurs. Ainsi, les navigateurs sont faits pour tolérer les erreurs. Le moteur DOM, qui analyse le code HTML et produit une table des id pour accès rapide via getElementById, sait que les id risquent de ne pas être uniques, et prévoit ce cas dans son algorithme. Dans la spec, il est simplement écrit qu’il ne faut pas le faire, ou peut-être que le comportement sera indéfini (à vrai dire j’ai la flemme d’aller vérifier sur le moment) ; dans la pratique, les navigateurs inscrivent dans leur table des id seulement le premier élément rencontré, et les suivants sont ignorés.
Le moteur CSS, lui, sait qu’une règle sélectionnant un id (#machin) est probablement écrite avec l’intention que tous les éléments correspondants reçoivent le style voulu, c’est donc en quelques sortes le comportement inverse.
Les gens qui développent jQuery doivent également composer avec les risques d’erreur. Ils et elles auraient pu décider que $("#machin") utilise getElementsByTagName ou querySelectorAll sous le capot, mais ont préféré invoquer getElementById pour profiter du gain de performance et coller aux pratiques établies en JS vanilla. Je suppose que ça a fait l’objet d’un débat.
Bref, la tolérance envers le code non standard c’est quelque chose de compliqué, qui demande de la réflexion et des compromis, et les gens ne se donneraient pas autant de peine si ce n’était pas important.

Pourquoi on me dit que c’est mal ?
Pour deux raisons, principalement. La première, c’est les situations dans lesquelles ça peut merder. Si je modifie un code HTML, je vais peut-être y ajouter un id qui existe déjà. Peut-être parce que j’ai commencé ce code il y a longtemps et que j’ai oublié ; ou peut-être parce qu’il a été écrit par quelqu’un d’autre. Par exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!-- ancien code -->
<div id="bidule"></div>
 
...
 
<!-- nouveau code -->
<div id="bidule"></div>

Je veux enrichir mon nouvel élément bidule avec du comportement, pour en faire un super bouton qui lance une animation trop classe. Alors j’écris du JavaScript :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
let superBidule = document.getElementById("bidule");
superBidule.addEventListener("click", function () {
  ...
});

Et là quand je clique sur mon super bouton bidule, il ne se passe rien, et je n’ai pas de message d’erreur dans la console, et je ne comprends pas pourquoi ça ne marche pas, et je commence à m’arracher les cheveux. Alors qu’il suffirait que je clique sur la première <div id="bidule">, mais pourquoi est-ce que je ferais ça ?

Cette même tolérance des navigateurs dont j’ai parlé juste avant est un obstacle ici, car elle m’empêche de voir rapidement où se situe le problème. Dans un monde idéal, personne ne dupliquerait les id, et les navigateurs pourraient signaler ça comme une erreur… Mais le monde n’est pas idéal. C’est la que les outils comme la bibliothèque dvjhUtilities de danielhagnoul s’avèrent utiles.

La seconde raison, c’est le genre de chose qu’on comprend intuitivement avec un peu d’expérience, mais qui est difficile à expliquer. Et c’est précisément pour cette raison qu’on trouve si peu d’explications.
Il s’agit du coût de maintenance. Un code qui repose, intentionnellement ou non, sur l’existence de plusieurs fois le même id, sera plus difficile à lire et plus difficile à modifier, parce qu’on ne s’attend pas à un tel comportement. Parce que c’est quand même écrit dans la spec, et que, a priori, les gens ont plutôt tendance à suivre la spec. Un code qui ne suit pas la spec est surprenant dans le mauvais sens du terme, et demande plus d’efforts à maintenir.

**SpaceFrog** · 03/01/2019, 08h19

La meilleure des justifications que je puisse donner c'est que id = identifiant ...
Et donc je n'aimerai pas que quelqu'un ait la même carte d'identité que moi, ou que quelqu'un ait le meêm numéro de ticket que moi dans la queue de la boucherie!
En gros si ensuite tu dois faire appel a un id par script sur la page, pose toi la question de savoir lequel va être pris en compte...
D'autant plus qu'il existe les class pour cibler plusieurs éléments en une seule fois...

Résultat de certains calculs ne s'affichent pas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager