Calcul dans un formulaire

**sness** · 19/02/2024, 16h09

Bonjour,

je débute et suis bloqué sur un point pour un fichier html / js

Je souhaite récupérer depuis un input une valeur et faire un calcul dont le résultat s'affichera dans un autre champ après clic sur un bouton.

Mon problème c'est que mon code semble ne rien calculer et mes champs s'effacent alors qu'il ne faudrait pas...

Pourriez-vous jeter un oeil et me faire part de vos commentaires et conseils?

Merci d'avance

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
<form id="Formulaire">
Nom et prénom: <input id="Nom_Prénom" type="text" size="30px"><br><br>
Prix de l'appareil: <input name="valeurTTC" type="text" size="15px">
<button onclick="CALCUL_FRANCHISE()">Calculer</button>
<button onclick="window.print()">Impression</button>
<input class="styled" type="reset" value="Effacer" Align="left"><br>
</form>
<p>franchise 70 <span id="Franchise70"></span></p>
<p>franchise 60 <span id="Franchise60"></span></p>
<p>franchise 50 <span id="Franchise50"></span></p>
<p>franchise 40 <span id="Franchise40"></span></p>
<p>franchise 20 <span id="Franchise20"></span></p>
</p>
 
 
<script type="text/javascript">
function CALCUL_FRANCHISE()
{
var F70=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,70;
document.getElementbyId("Franchise70").innerHTML=F70;
var F60=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,60;
document.getElementbyId("Franchise60").innerHTML=F70;
var F50=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,50;
document.getElementbyId("Franchise50").innerHTML=F70;
var F40=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,40;
document.getElementbyId("Franchise40").innerHTML=F70;
var F20=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,20;
document.getElementbyId("Franchise20").innerHTML=F70;
}
</script>

**sness** · 19/02/2024, 17h32

J'ai apporté quelques modifications mais toujours le même résultat (c'est à dire rien

)

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
<form id="Formulaire">
<p>Nom et prénom: <input id="Nom_Prénom" type="text" size="30px"></p>
<p>Prix de l'appareil: <input name="valeurTTC" type="text" size="15px"></p>
<button onclick="CALCUL_FRANCHISE()">Calculer</button>
<button onclick="window.print()">Impression</button>
<input class="styled" type="reset" value="Effacer" Align="left"><br>
</form>
 
<p>franchise 70 <span id="Franchise70"></span></p>
<p>franchise 60 <span id="Franchise60"></span></p>
<p>franchise 50 <span id="Franchise50"></span></p>
<p>franchise 40 <span id="Franchise40"></span></p>
<p>franchise 20 <span id="Franchise20"></span></p>
 
 
 
<script type="text/javascript">
 
{
function CALCUL_FRANCHISE()
var F70, F60, F50, F40, F20, Franchise70, Franchise60, Franchise50, Franchise40, Franchise20;
 
F70=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,70;
document.getElementbyId("Franchise70").innerHTML=F70;
F60=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,60;
document.getElementbyId("Franchise60").innerHTML=F70;
F50=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,50;
document.getElementbyId("Franchise50").innerHTML=F70;
F40=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,40;
document.getElementbyId("Franchise40").innerHTML=F70;
F20=document.getElementbyId("Formulaire").element["valeurTTC"].value)*0,20;
document.getElementbyId("Franchise20").innerHTML=F70;
}
</script>

**ASCIIDEFOND** · 19/02/2024, 19h19

Salut sness,

Pour une simple page HTML avec du JavaScript, il n'est pas nécessaire de passer par un formulaire avec la balise "<form></form>"

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
 
<body>
 
    <label for="nomprenom">Nom et prénom:</label><br>
    <input id="nom-prenom" name="nomprenom" type="text" size="30px" style="margin-top: 10px;" /><br><br>
 
    <label for="leprix">Prix de l'appareil:</label><br>
    <input type="text" name="leprix" id="prix" size="15px" style="margin: 10px 0px 10px;" />
 
    <button onclick="calcul_franchise()">Calculer</button>
    <button onclick="window.print()">Impression</button>
    <button class="styled" onclick="effacer()">Reset</button><br>
 
    <p>franchise 70: <span class="franchise"></span></p>
    <p>franchise 60: <span class="franchise"></span></p>
    <p>franchise 50: <span class="franchise"></span></p>
    <p>franchise 40: <span class="franchise"></span></p>
    <p>franchise 20: <span class="franchise"></span></p>
 
    <script>
        let nomPrenom = document.getElementById('nom-prenom'),
            prix = document.getElementById('prix'),
            elementsSpan = document.querySelectorAll('.franchise')
 
        function calcul_franchise() {
            let dataFranchises = ['0.70', '0.60', '0.50', '0.40', '0.20'], // Tableau avec les valeurs des franchises
                resultat = 0
 
            for (let i = 0; i < elementsSpan.length; i++) { //On boucle les balises avec le nom de class "franchise"
                resultat = prix.value * dataFranchises[i]
                elementsSpan[i].textContent = resultat.toFixed(2)
            }
        }
 
        function effacer() {
            for (let i = 0; i < elementsSpan.length; i++) {
                elementsSpan[i].textContent = null
            }
            nomPrenom.value = null
            prix.value = null
 
        }
    </script>
</body>
 
</html>

**sness** · 20/02/2024, 09h23

Bonjour et merci pour ton retour.

Donc si je veux insérer le résultat (SPAN) dans une table, la cellule de mon tableau doit bien être:

Code html :

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

1
2
3
4
5
<tr>
	<td>Prise en charge 1ère année</td>
	<td colspan="2" id="Detail_garanties">franchise 70%, soit <span class="franchise"></span>€</td>
	<td id="cellule_prime">100% - 0€ franchise</td>
</tr>

Parceque là j'ai un "NaN" qui s'affiche

Merci pour les conseils

**ASCIIDEFOND** · 20/02/2024, 11h13

Il faut mieux éviter d’insérer des balises SPAN dans des balises TD.

Tu peux faire comme cela:

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
    <!-- <p>franchise 70: <span class="franchise"></span></p>
    <p>franchise 60: <span class="franchise"></span></p>
    <p>franchise 50: <span class="franchise"></span></p>
    <p>franchise 40: <span class="franchise"></span></p>
    <p>franchise 20: <span class="franchise"></span></p> -->
 
<table style="table-layout: auto; width: 20%; text-align: left;">
        <tr>
            <th>Prise en charge</th>
            <th>Franchises</th>
            <th>Valeurs</th>
        </tr>
        <tr>
            <td>1ère année</td>
            <td>70%</td>
            <td class="franchise"></td>
        </tr>
        <tr>
            <td>1ère année</td>
            <td>60%</td>
            <td class="franchise"></td>
        </tr>
        <tr>
            <td>1ère année</td>
            <td>50%</td>
            <td class="franchise"></td>
        </tr>
        <tr>
            <td>1ère année</td>
            <td>40%</td>
            <td class="franchise"></td>
        </tr>
        <tr>
            <td>1ère année</td>
            <td>20%</td>
            <td class="franchise"></td>
        </tr>
    </table>

**sness** · 20/02/2024, 15h58

Merci beaucoup pour ton aide et tes conseils

j'ai énormément appris

**NoSmoking** · 20/02/2024, 18h12

Bonjour,

Envoyé par sness

j'ai énormément appris

C'est le but des forums, mais il me semble important de revenir sur les maladresses/erreurs dans ton code

Tout d'abord un élément <button> est par défaut de type submit ce qui fait qu'avec ton 1st code, présence d'un élément <form> à chaque fois que tu cliques sur celui-ci le formulaire est transmis donc tu ne peux pas voir le résultat, il suffit donc de mettre le type=button à celui-ci pour que cela « fonctionne ».

Code html :

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

1
2
3
<button type="button" onclick="CALCUL_FRANCHISE()">Calculer</button>
<button type="button" onclick="window.print()">Impression</button>
<input class="styled" type="reset" value="Effacer" Align="left"><br>

Maintenant le code.

document.getElementbyId n'existe pas mais document.getElementById oui
ElementFormulaire.element n'existe pas mais elementFormulaire.elements oui
les nombres décimaux en JavaScript s'écrivent avec un point, value * 0.60, et non une virgule, value * 0,60

lorsque l'on utile plusieurs fois, dans ton cas document.getElementById("Formulaire").elements["valeurTTC"].value, on le met en « cache » pour le réutiliser

Code :

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

1
2
3
4
5
const valeur = document.getElementById("Formulaire").elements["valeurTTC"].value;
// et ensuite
document.getElementById("Franchise60").innerHTML = valeur * 0.70;  // textContent fait aussi très bien l'affaire
document.getElementById("Franchise60").innerHTML = valeur * 0.60;
// etc ...

...ceci n'empêche pas les optimisations préconisées par ASCIIDEFOND

Pour info prend l'habitude d'ouvrir la console de débuggage, touche F12, certaines des ces erreurs devaient être visibles.

Envoyé par ASCIIDEFOND

il n'est pas nécessaire de passer par un formulaire avec la balise "<form></form>"

c'est pourtant bien pratique dans certains cas de n'avoir à gérer qu'un événement oninput sur le formulaire

Code html :

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

1
2
3
<form id="Formulaire" oninput="CALCUL_FRANCHISE()">
  // le reste
</form>

Il faut mieux éviter d’insérer des balises SPAN dans des balises TD.

Pourquoi éviter, je dirais plutôt qu'ils ne sont pas indispensables, sauf à vouloir styler précisément la sortie.

Calcul dans un formulaire

JavaScript

Discussions similaires

Partager

Partager