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

Calcul dans un formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager