Résultat calcul ne s'affiche pas

Version imprimable

12/11/2019, 03h36
niighthawk

Résultat calcul ne s'affiche pas

Bonjour à tous, fait 2-3 jours je cherche pourquoi dans ma 3E CASE le résultat ne s'affiche pas comme le restant de mon script.

on dit toujours que le regard neuf de l'externe nous aide à mieux voir ce que l'on ne voit pas.

Merci à celui ou celles qui pourra m'aider :)

https://codepen.io/niighthawk/pen/NWWBmwB
12/11/2019, 05h03
CosmoKnacki

Je ne vois pas comment tu peux espérer trouver quoi que ce soit dans un code qui n'est pas indenté.
Donc commence par faire ça et poste le résultat ici entre balises [ code ] [/code].
12/11/2019, 08h20
SpaceFrog

une balise script dans une balise table :koi: ...

Sinon la console est pleine d'enseignements...

ex:

Citation:

Cannot set property 'textContent' of undefined

Citation:

Envoyé par CosmoKnacki

Je ne vois pas comment tu peux espérer trouver quoi que ce soit dans un code qui n'est pas indenté.
Donc commence par faire ça et poste le résultat ici entre balises [ code ] [/code].

c'est corrigé pour l'indentation

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
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
<div id="antennes" class="page default">
 
    <br>
    <br>
    <table>
 
        <tr style="border-bottom:0px;height:0;">
            <td style="border-bottom:0px" width='75'></td>
            <td style="border-bottom:0px" width='75'></td>
            <td style="border-bottom:0px" width='75'></td>
            <td style="border-bottom:0px" width='75'></td>
        </tr>
        <tr>
            <td class='bargrise2' colspan='3'>MESURE POUR LA COUPE</td>
            <td class='inputfreq'>
                <div class='ui-input-text ui-body-inherit ui-corner-all'>
                    <input style="text-align: right;" type="tel" id="freq" size="auto" onchange="output();" />
                </div>
            </td>
        </tr>
        <tr>
            <td class='bargrise2' colspan='2' style="line-height:18px">1ERE CASE</td>
            <td class='bargrise2' colspan='2' style="line-height:18px">2E CASE</td>
        </tr>
        <tr>
            <td class='reponsefreq' colspan='2'>
                <span class="resultinches">pouces</span>
            </td>
            <td class='reponsefreq' colspan='2'>
                <span class="resultinches">pouces</span>
            </td>
        </tr>
        <tr>
            <td class='reponsefreq' colspan='2'>
                <span class="resultmm">mm</span>
            </td>
            <td class='reponsefreq' colspan='2'>
                <span class="resultmm">mm</span>
            </td>
        </tr>
        <tr>
            <td class='bargrise2' colspan='2' style="line-height:18px">3E CASE</td>
            <td class='bargrise2' colspan='2' style="line-height:18px">4E CASE</td>
        </tr>
        <tr>
            <td class='reponsefreq' colspan='2'>
                <span class="resultinches">pouces</span>
            </td>
            <td class='reponsefreq' colspan='2'>
                <span class="resultinches">pouces</span>
            </td>
        </tr>
        <tr>
            <td class='reponsefreq' colspan='2'>
                <span class="resultmm">mm</span>
            </td>
            <td class='reponsefreq' colspan='2'>
                <span class="resultmm">mm</span>
            </td>
        </tr>
        <script>
            // Cette fonction est prise d'ici : https://stackoverflow.com/a/4652513
            function reduce(numerator, denominator) {
                var gcd = function gcd(a, b) {
                    return b ? gcd(b, a % b) : a;
                };
                gcd = gcd(numerator, denominator);
                return [numerator / gcd, denominator / gcd];
            }
 
            var resultinches = document.getElementsByClassName('resultinches');
            var resultmm = document.getElementsByClassName('resultmm');
            var freq = document.getElementById('freq');
            var factor = 16 / 25.4;
 
            function display(indice, fc) {
 
                if (fc === undefined) {
                    resultinches[indice].textContent = "NON DISPONIBLE";
                    resultmm[indice].textContent = "";
                    return;
                }
 
                resultmm[indice].textContent = Math.round(fc) + " mm";
 
                var roundResult = Math.round(fc * factor) / 16;
                var pouces = Math.trunc(roundResult);
                var n = (roundResult - pouces) * 16;
                var str;
 
                if (n == 0) str = " pouces";
                else {
                    var fractionSimple = reduce(n, 16);
                    str = " pouces et " + fractionSimple[0] + "/" + fractionSimple[1];
                }
                resultinches[indice].textContent = pouces + str;
            }
 
 
            function output() {
                var FREQ_COMMUNE = +freq.value; // En rajoutant un "+" on convertis en nombre...
 
                if (FREQ_COMMUNE < 130 || FREQ_COMMUNE >= 1001) { // inf à 130 ou sup ou egal à 1001
                    for (var i = 0; i < 6; i++) display(i);
 
                } else if (FREQ_COMMUNE < 177) { // entre 130 et 177
 
                    display(0, 1003 - (3.5 * FREQ_COMMUNE));
                    display(1, 2775 - (10.58 * FREQ_COMMUNE));
                    display(3, 3316.5 - (15.12 * FREQ_COMMUNE));
                    display(4, 286000 / (4 * FREQ_COMMUNE));
                    display(5, 301000 / (2 * FREQ_COMMUNE));
 
 
                } else if (FREQ_COMMUNE < 380) { // entre 177 et 380
                    for (var i = 0; i < 6; i++) display(i);
                    display(4, 285000 / (4 * FREQ_COMMUNE));
 
                } else if (FREQ_COMMUNE < 513) { // entre 380 et 513
 
                    var temp = 291 - (0.3463 * FREQ_COMMUNE);
                    display(0, temp);
                    display(1);
                    display(3);
                    display(4, 285000 / (4 * FREQ_COMMUNE));
                    display(5);
 
                } else if (FREQ_COMMUNE < 760) { // entre 513 et 760
                    for (var i = 0; i < 6; i++) display(i);
                    display(4, 285000 / (4 * FREQ_COMMUNE));
 
                } else if (FREQ_COMMUNE < 1001) { // entre 760 et 1001
 
                    var temp = 133 - (0.0888889 * FREQ_COMMUNE);
                    display(0, temp);
                    display(1);
                    display(3);
                    display(4, 285000 / (4 * FREQ_COMMUNE));
                    display(5);
                }
 
                // cas 3 à part...
                if (FREQ_COMMUNE >= 136 && FREQ_COMMUNE <= 1000) {
 
                    var fc = 2382.7 * Math.pow(FREQ_COMMUNE, -0.96);
                    var roundResult = Math.round(fc * 16) / 16;
                    var pouces = Math.trunc(roundResult);
                    var n = (roundResult - pouces) * 16;
                    var str;
 
                    if (n == 0) str = " pouces";
                    else {
                        var fractionSimple = reduce(n, 16);
                        str = " pouces et " + fractionSimple[0] + "/" + fractionSimple[1];
                    }
                    resultinches[2].textContent = pouces + str;
                    resultmm[2].textContent = Math.round(fc * 25.4) + " mm";
                } else {
                    display(2);
                }
            }
        </script>
 
    </table>
 
</div>

13/11/2019, 01h50
niighthawk

Citation:

Envoyé par SpaceFrog

une balise script dans une balise table :koi: ...

Sinon la console est pleine d'enseignements...

ex:

cela peut créer des problème que le script soit dans une balise table ? pourtant ca marche bien pour les autre champs sauf celui qui me cause problème...
13/11/2019, 08h06
SpaceFrog

Ce n'est pas parce que "ça marche" que c'est une bonne pratique ...
13/11/2019, 16h46
CosmoKnacki

Le code de ta fonction output() semble être écrit pour 6 cases, or tu n'en as que 4, ce qui fait que lorsque tu essaies d'accéder à une case qui n'existe pas le script de la fonction plante et la suite du code n'est pas exécuté. Comme une partie du code de cette fonction censée modifier la 3e case se trouve à la fin, tu n'en vois jamais la couleur.
Tu dois donc virer tous les appels à display() avec un indice supérieur à 3.

Bonjour,

1-
Code:

1 2 3 4 5 </tr> <script> ... </script> </table>
Non. On ne peut pas.
APRÈS </table>, oui.

2-

Code:

<input ... type="tel" id="freq" size="auto" onchange="output();" />

type="tel" ?? :koi:

3-

Code:

var FREQ_COMMUNE = +freq.value; // En rajoutant un "+" on convertis en nombre...

"on convertis en nombre" : il existe un moyen... plus conventionnel. :roll:

4-

Code:

for (var i = 0; i < 6; i++) display(i);

D'où vient ce "6" ?
on peut obtenir le nombre RÉEL avec : resultinches.length.

5-
Code:

1 2 3 4 5 display(0, 1003 - (3.5 * FREQ_COMMUNE)); display(1, 2775 - (10.58 * FREQ_COMMUNE)); display(3, 3316.5 - (15.12 * FREQ_COMMUNE)); display(4, 286000 / (4 * FREQ_COMMUNE)); display(5, 301000 / (2 * FREQ_COMMUNE));
Il manque l'indice 2... 8O

Ça fait beaucoup...

14/11/2019, 13h24
ProgElecT
Citation:
Envoyé par jreaux62

Bonjour,

2-

Code:

<input ... type="tel" id="freq" size="auto" onchange="output();" />

type="tel" ?? :koi:

...
Pour mon propre apprentissage, elle est ou l'erreur, ce type existe, c'est l'absence du pattern qui te fait souligner ce point ? Merci
14/11/2019, 13h38
Invité

@ProgElecT
point 2- :
C'est surtout que cet <input> ne semble pas avoir de rapport avec un "numéro de téléphone", mais une "fréquence" (-> var FREQ_COMMUNE).
Je verrais plutôt :

Code:

<input type="number" step="0.01" .......... />

Quant au point 3- :

Code:

var FREQ_COMMUNE = parseFloat(freq.value); // on convertit en nombre (float)...
14/11/2019, 13h48
ProgElecT

Merci
Comme il m'arrive de croire avoir compris un sujet et que plus tard j'ai la démonstration que non, ... je pensais que quelque chose m'avait encore échappé.Merci.

Citation:

Envoyé par jreaux62

Code:

1
2
3
4
5
                    display(0, 1003 - (3.5 * FREQ_COMMUNE));
                    display(1, 2775 - (10.58 * FREQ_COMMUNE));
                    display(3, 3316.5 - (15.12 * FREQ_COMMUNE));
                    display(4, 286000 / (4 * FREQ_COMMUNE));
                    display(5, 301000 / (2 * FREQ_COMMUNE));

Il manque l'indice 2... 8O

Non, l'indice 2 (celui de la 3e case problématique) est traité séparément à la fin de la fonction.

16/11/2019, 11h48
niighthawk

Merci CosmoKnacki

j'ai trouvé mon erreur et j'ai retiré les 2 autres display inutiles que je ne me servait plus et que j'avais oublié !!.
16/11/2019, 16h01
niighthawk

le pourquoi j'utilise " TEL" au lieu de "NUM" cest que j'utilise ce petit script sur mon téléphone alors quand j'utilise "NUM" le clavier qui s'affiche est celui Alphanumérique.

si j'utilise "TEL", android ouvre le clavier numérique donc chiffre plus gros à l'écran ;)

c’est la manière j'ai trouvé pour contourner cela :) .

merci à tous