Document HTML - impossible de trouver mon erreur

**remiwoa** · 01/07/2020, 07h37

Bonjour a tous,
Moi c'est Remi, 26 ans, je vis en Nouvelle Zelande (d'ou l'absence totale d'accent quand je vous ecris).
Je ne suis pas un developpeur, cependant, j'ai fait un petit peu de code durant ma licence donc je me debrouille (ou du moins: je peux comprendre du code sans trop pleurer). Malheureusement, je n'ai pas fait beaucoup de HTML et je suis absolument incapable de dire ou est mon erreur dans le document que j'ai attache. Je pense honnetement que mon erreur doit etre celle d'un debutant, mais etant donne que je tire mon experience en code du langage C++ et MySql, je m'aventure dans des terrains inconnus avec HTML.

Comme vous le voyez, si vous utilisez le document sous sa forme HTML, il ne se passe rien quand on clique sur Calculate. J'ai essaye de trouver la raison, mais je ne sais pas si c'est un probleme d'appellation, si c'est un probleme dans mes formules de calcul ou si c'est un pur oubli de ma part. J'aimerai enormement qu'on me dise ce qui ne marche pas pour que je ne reproduise pas la meme erreur par la suite!

Je suis desole si cette discussion ne se trouve pas dans la bonne rubrique.

N'hesitez pas a la deplacer autre part si necessaire.

Merci d'avance, et bonne journée (ici, il est 17H30!)

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>GGS0060 Temporary and Contracted Workers PSP</title>
 
  <link rel="icon" type="image/ico" href="favicon.ico">
  <style>
    body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; }
    tr.spaceUnder > td { padding-bottom: 1.2em; }
    td {
      padding-right:5px;
      padding-left:10px;
    }
 
    .fill {
      background-color:#009da9;
      border:solid 1px #000;
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    }
 
    input {
      background-color:#fff;
      border:solid 1px #000;
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    }
 
    input[type="button"] {
      background-color:#bf115b;
      border:solid 0px #000;
      padding:10px;
      font-size:16px;
      color:white;
    }
 
    .align-center {
      margin-left: auto;
      margin-right: auto;
    }
 
    .align-center > img {
      display: block;
      margin: auto;
    }
 
    .min-width-300 {
      min-width: 300px
    }
 
    .bg-black {
      background-color: black
    }
 
    .d-flex { display: flex }
    .flex-row { flex-direction: row }
    .flex-column { flex-direction: column }
    .flex-wrap { flex-wrap: wrap }
    .justify-content-center { justify-content: center }
    .justify-content-between { justify-content: space-between }
    .align-items-center { align-items: center }
    .mr-5 { margin-right: 5em }
    .mt-5 { margin-top: 5em }
    .text-center { text-align: center }
    .border-1px-black { border: 1px solid black }
  </style>
</head>
 
<body style="width: 100%">
  <div class="d-flex flex-column align-items-center justify-content-center">
    <h1 class="text-center">Title <br/>Title2</h1>
 
    <div class="d-flex">
      <form class="mr-5 border-1px-black" name="TotalRate">
        <table cellpadding=0 cellspacing=6 >
          <tr>
            <td><strong>
                <font size="4"></font>
              </strong></td>
          </tr>
 
          <tr>
            <td>Hourly Pay Rate to Candidate</td>
            <td></td>
            <td>$<input type="text" name="payRate" size=5 class="fill"></td>
          </tr>
 
          <tr>
            <td>Superannuation</td>
            <td>9.5%</td>
            <td>$<input type="text" name="super" size=5 maxlength=40></td>
          </tr>
 
          <tr class="spaceUnder">
            <td>Total Candidate Rate</td>
            <td></td>
            <td>$<input type="text" name="TotalCandidateRate" size=5 maxlength=40></td>
          </tr>
 
          <tr>
            <td>Payroll Tax</td>
            <td>0%</td>
            <td>$<input type="text" name="payrollTax" size=5 maxlength=40>
            </td>
 
          </tr>
 
          <tr class="spaceUnder">
            <td>WorkCover</td>
            <td>1.00%</td>
            <td>$<input type="text" name="workCover" size=5 maxlength=40 /></td>
          </tr>
 
          <tr>
            <td>Insurances</td>
            <td>1.00%</td>
            <td>%<input type="text" name="insurances" size=5 maxlength=40></td>
          </tr>
 
          <tr class="spaceUnder">
            <td>Total Candidate Cost</td>
            <td></td>
            <td>$<input type="text" name="totalcost" size=5 maxlength=40></td>
          </tr>
 
          <tr class="spaceUnder">
            <td>Supplier Margin</td>
            <td>8% (on base only)</td>
            <td>%<input type="text" name="margin" size=5 maxlength=40></td>
          </tr>
 
          <tr class="spaceUnder">
            <td>Charge Rate (excl. GST)</td>
            <td></td>
            <td>$<input type="text" name="ChargeRate" size=5 maxlength=40></td>
          </tr>
 
          <tr>
            <td colspan="3" align="right"><input type="button" value="Calculate" onClick="calcTotalRate(this.form)"></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</body>
 
<script>
  function normalize(number) {
    return parseFloat(number).toFixed(2)
  }
 
  function setValue(attr, value) {
    attr.value = value
  }
 
  function calcTotalRate(form) {
    var payRate = form.payRate.value
    var super = parseFloat(payRate) * 0.095
    var TotalCandidateRate = parseFloat(payRate) + parseFloat(super)
    var payrollTax = 0 * parseFloat(TotalCandidateRate)
    var workCover = 0.01 * parseFloat(TotalCandidateRate)
    var insurances = 0.01 * parseFloat(TotalCandidateRate)
    var totalcost = parseFloat(TotalCandidateRate) + parseFloat(payrollTax) + parseFloat(workCover) + parseFloat(insurances)
    var margin = 0.08 * parseFloat(payRate)
    var ChargeRate = parseFloat(totalcost) + parseFloat(margin)
 
    setValue(form.super, normalize(super))
    setValue(form.TotalCandidateRate, normalize(TotalCandidateRate))
    setValue(form.payrollTax, normalize(payrollTax))
    setValue(form.workCover, normalize(workCover))
    setValue(form.insurances, normalize(insurances))
    setValue(form.totalcost, normalize(totalcost))
    setValue(form.margin, normalize(margin))
    setValue(form.ChargeRate, normalize(ChargeRate))
  }
 
</script>
 
</html>

Remi

**javatwister** · 01/07/2020, 08h14

Bonjour,

Ce que tu copies là est un code mêlant html / css et JavaScript: une base pour mieux comprendre ce que tu fais.

Quelques problèmes plus précis:

- super est un mot-clé réservé de JS, tu dois donc nommer ta variable autrement;
- l'objet form n'existe pas dans ta page; sauf si tu donnes un id="form" à ton formulaire. Mais à ce moment-là, l'appel du formulaire doit être fait par document.getElementById("form");
- Ne tape aucun code après la fermeture de balise </body>: insère la partie script juste avant, si tu veux;

**remiwoa** · 01/07/2020, 22h36

Hey javatwister!
Merci pour ta reponse, tout marche tres bien maintenant :-)
Merci, merci, merci!
Remi

Document HTML - impossible de trouver mon erreur

HTML

Vue hybride

Discussions similaires

Partager

Partager