Calcul dans un formulaire

Version imprimable

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:

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>

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

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
<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>

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:

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>

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:

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

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

Tu peux faire comme cela:

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
    <!-- <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>

20/02/2024, 15h58
sness

Merci beaucoup pour ton aide et tes conseils

j'ai énormément appris

:plusser:

Bonjour,

Citation:

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:

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:

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.

Citation:

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:

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

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.