[DOM] Tableau de calcul en javascript

**mariepierre** · 17/03/2009, 19h00

Bonjour,

j'ai besoin de vos lumières pour un exercice :

Je souhaiterais faire un tableau où on aurait un produit (avec un prix et un poids défini dans deux colonnes distinctes), on choisit la quantité dans une autre colonne et dans les deux dernières on y trouve le poids total et le prix total (suivant la quantité choisie).

Je me sers de la formule suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<head>
<script language="javascript"> 
function popbs() { window.document.formulaire.ptpb.value = document.formulaire.popb.value * 370 ; } 
function prpbs() { window.document.formulaire.prtpb.value = document.formulaire.popb.value * 6 ; }
</script> 
</head>
<body>
    <td align="center"><input type="text" name="popb" size="3" onkeyup="popbs()"> </td>
    <td align="center"><input type="text" name="ptpb" size="8" disabled="disabled" > g</td>
    <td align="center"><input type="text" name="prtpb" size="8" disabled="disabled" > g</td>
</body>

J'arrive à faire le premier calcul : celui qui fait : quantitéx370g = poids total
Mais impossible de faire l'autre. En fait, c'est que je n'arrive pas à combiner deux fonctions pour un formulaire : quand je les mets séprament ça va... Comment faire en sorte que la case pour la quantité soit utilisée pour deux calculs ?

Merci

**Auteur** · 17/03/2009, 20h05

bonjour,

La valeur contenue dans un input (quel qu'il soit) ou un textarea est une chaine de caractères. Donc il faut transformer cette chaine en nombre en utilisant parseInt() ou parseFloat() :

Code :

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

1
2
 
document.formulaire.ptpb.value = parseFloat(document.formulaire.popb.value) * 370 ;

**SpaceFrog** · 17/03/2009, 20h34

il sera aussi plus élégant (et crossbrowser) d'utiliser une syntaxe plus correcte:

Code :

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

document.forms['formulaire'].elements['ptpb'].value

n'oublie pas de preciser également la base du parse (par defaut sous IE par exemple elle est à 8)

**Auteur** · 17/03/2009, 21h06

[QUOTE=SpaceFrog;4119782]il sera aussi plus élégant (et crossbrowser) d'utiliser une syntaxe plus correcte:

Code :

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

document.forms['formulaire'].elements['ptpb'].value

ou document.getElementById() ;=

Envoyé par SpaceFrog

n'oublie pas de preciser également la base du parse (par defaut sous IE par exemple elle est à 8)

IE travaille en base 8

. J'aurai appris quelque chose

Maintenant si mariepierre utilise parseFloat() je ne pense pas qu'il faille préciser la base

**Bovino** · 18/03/2009, 06h54

Envoyé par SpaceFrog

(par defaut sous IE par exemple elle est à 8)

Uniquement si le chiffre en question commence par 0 il me semble ?

**mariepierre** · 18/03/2009, 14h56

merci pour vos réponses, cependant cela ne marche toujours pas :

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
 
 
function popbs() { window.document.formulaire.ptpb.value = parseFloat(document.formulaire.popb.value) * 370 ; } 
function prpbs() { window.document.formulaire.prtpb.value = document.formulaire.popb.value * 6 ; }
 
 
<tr bgcolor="#f6f1e0">
    <td><img src=" "></td>
    <td><strong>Petit brebis</strong></td>
    <td align="center">370g</td>
    <td align="center">6,00 €</td>
    <td align="center"><input type="text" name="popb" size="3" onkeyup="popbs()" onKeyUp="prpbs()"> </td>
    <td align="center"><input type="text" name="ptpb" size="8" disabled="disabled" onkeyup="pts()" > g</td>
    <td align="center"><input type="text" name="prtpb" size="8" disabled="disabled" > euros</td>
  </tr>

C'est au niveau de la gestion de deux fonctions non qu'il y a un problème ?

**Bovino** · 18/03/2009, 15h05

Code :

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

<td align="center"><input type="text" name="popb" size="3" onkeyup="popbs();prpbs()"> </td>

si tu mets 2 fois onkeyup, le 2e annule le 1er

**mariepierre** · 18/03/2009, 15h39

oui ça je m'en doute mais c'est pour vous montrer qu'il faut que cette case "appelle 2 fonctions".
Elle doit servir pour calculer le poids total et le prix total...
J'ai essayé le et "and", "&" mais ça ne marche pas

**SpaceFrog** · 18/03/2009, 16h26

aller je te fais cadeau d'un point virgule ... tiens ;

**Bovino** · 18/03/2009, 18h05

Envoyé par SpaceFrog

aller je te fais cadeau d'un point virgule ... tiens ;

Ah... comme dans la ligne que j'ai proposée ?

**mariepierre** · 18/03/2009, 18h11

quelle idiote.....

excusez moi, j'étais tellement démoralisée....
j'essaie et je vous tiens au courant !
Merci

**mariepierre** · 18/03/2009, 18h30

re moi...

pas besoin de vous dire que ça marche, vous vous en doutiez...

mais maintenant j'ai un autre soucis... :
donc j'obtiens un poids total par rapport à la quantité et pareil pour le prix.
Maintenant, j'aimerais que tous les "poids total" s'ajoutent pour obtenir un poids final.
j'ai essaye ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function pts() { window.document.formulaire.pt.value = parseFloat(document.formulaire.ptpb.value) + parseFloat(document.formulaire.ptt.value) + parseFloat(document.formulaire.ptc.value) + parseFloat(document.formulaire.ptpf.value) + parseFloat(document.formulaire.ptbp.value) + parseFloat(document.formulaire.ptbf.value); } 
 
 
<!-- UNE DES CASES OBTENANT UN POIDS TOTAL -->
<input type="text" name="ptbf" size="8" disabled="disabled" onkeyup="pts()">
 
 
<!-- LA CASE FINAL DU POIDS FINAL -->
<input type="text" name="pt" size="8" disabled="disabled" >

inutile de vous dire que ça ne marche pas....
où est mon erreur ?

**SpaceFrog** · 18/03/2009, 20h20

disabled et onkeyup ne font pas bon ménage ?
essaye readonly à la place

**mariepierre** · 19/03/2009, 12h54

readonly à la place de disabled ne marche pas non plus.

Est-ce que ce ne serait pas un problème de réappropriation des données fournies automatiquement ? = Est-ce que le problème ne vient pas du fait que je demande un calcul automatique avec comme coefficient des résultats d'autres calculs auto ?

**SpaceFrog** · 19/03/2009, 13h25

je te renvoie à cette intervention:
http://www.developpez.net/forums/d70...t/#post4119873

**mariepierre** · 19/03/2009, 13h35

donc il faut que je mette :

Code :

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

document.forms['formulaire'].elements['ptpb'].value

ça donnerait ça par exemple?

Code :

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

function pts() { window.document.formulaire.pt.value = document.forms['formulaire'].elements['ptpb'].value * 20; }

**SpaceFrog** · 19/03/2009, 14h31

là aussi

Code :

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

window.document.formulaire.pt.value

**mariepierre** · 19/03/2009, 15h13

donc :

Code :

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

1
2
3
 
 
document.forms['formulaire'].elements['pt'].value = document.forms['formulaire'].elements['ptpb'].value * 20; }

c'est ça ?

**SpaceFrog** · 19/03/2009, 15h22

si tu n'as qu'un seul pts sur la page .. oui

sinon passe par les id

**mariepierre** · 20/03/2009, 19h26

ça ne marche pas.

je mets comme fonction :

Code :

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

1
2
 
function pts() { document.forms['formulaire'].elements['pt'].value = document.forms['formulaire'].elements['ptbf'].value * 20;

donc je dis pour tester que le formulaire nommé pt doit prendre la valeur du formulaire (résultat d'un calcul automatique) nommé ptbf. C'est bien ça ?

et après voici le code :

Code :

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

1
2
3
4
 
 
<td align="center"><input type="text" name="ptbf" size="8" disabled="ReadOnly" onkeyup="pts()"> g</td>
<td align="center" bgcolor="#CCFF99"><input type="text" name="pt" size="8" disabled="disabled" > g</td>

où est mon erreur, je ne comprends pas là....

[DOM] Tableau de calcul en javascript

JavaScript

Discussions similaires

Partager

Partager