affichage dynamique d'un calcul dans une balise (newbie inside)

affichage dynamique d'un calcul dans une balise (newbie inside) - HTML/CSS - Programmation

Marsh Posté le 25-07-2006 à 16:11:14    

Bonjour,
je débute tout juste en javascript...
j'ai besoin de faire une feuille de calcul avec l'affichage de mes résultats en instantané.
J'ai donc commencé à coder avec ça mais tout ne marche pas :

Code :
  1. <html>
  2. <head>
  3.        <title>Essai JS</title>
  5. <script language=JavaScript>
  6. function Calcule()
  7. {
  8. var c1=document.getElementById('chiffre1').value
  9. var c2=document.getElementById('chiffre2').value
  10. var tt=c1*c2
  12. document.getElementById('total').innerHTML = tt
  14. }
  16. </script>
  17. </head>
  21. <center><h1><hr>
  22. <form name="facture">
  23. Chiffre 1 : <input type="text" id="chiffre1" size="3" onkeyup="document.getElementById('rappel_chiffre1').innerHTML = this.value;"><br>
  24. Chiffre 2 : <input type=text id="chiffre2" size="3" onkeyup="Calcule()"><br>
  25. Total : <input type=text name="total" size="3" readonly=1>
  26. <br>
  27. <br>
  28. <br>
  29. <div id="rappel_chiffre1"></div>
  30. TOTAL : <div id="total"></div>
  31. <br>
  33. <input type=button value="Calculer" onClick="Calcule()">
  35. </form>
  37. </body>
  38. </html>


 
En fait, mon chiffre 1 s'affiche bien dans la balise "rappel_chiffre1" et le résultat de la multiplication se fait bien dans mon <input type=text name="total"> mais pas dans la balise <div id="total"></div>.
Quelqu'un peut-il m'éclairer à se sujet SVP ??
 
Merci d'avance ! :hello:

Message cité 1 fois
Reply

Marsh Posté le 25-07-2006 à 16:11:14   

Reply

Marsh Posté le 25-07-2006 à 17:26:10    

y'a un prof qui donne ça en TP ou quoi ?

Reply

Marsh Posté le 25-07-2006 à 17:31:02    

Ouai ça à lair à la mode en ce moment.
Sinon juste après un p'tit coup d'oeuil tu trouve pas qu'il manque des ; dans ton code?

Reply

Marsh Posté le 25-07-2006 à 17:35:22    

C'est normal, JavaScript c'est du Ruby (dixit Masklinn)
 
Donc y'a pas de ";" en fin de ligne...
 
C'est bien connu voyons !
T'es pas à l'ordre du jour toi :o
 
:sarcastic:
 
(qu'est-ce qu'il faut pas dire comme âneries pour plaire à Masklinn...)

Reply

Marsh Posté le 25-07-2006 à 17:54:34    

snp a écrit :

Bonjour,
je débute tout juste en javascript...
j'ai besoin de faire une feuille de calcul avec l'affichage de mes résultats en instantané.
J'ai donc commencé à coder avec ça mais tout ne marche pas :

Code :
  1. ...
  2. document.getElementById('total').innerHTML = tt
  3. ...
  4. Total : <input type=text name="total" size="3" readonly=1>
  5. ...
  6. <div id="rappel_chiffre1"></div>


 
En fait, mon chiffre 1 s'affiche bien dans la balise "rappel_chiffre1" et le résultat de la multiplication se fait bien dans mon <input type=text name="total"> mais pas dans la balise <div id="total"></div>.
Quelqu'un peut-il m'éclairer à se sujet SVP ??


Bin, sans avoir tester ( et même sans les points virgules et avec du code dégueu) je pense que ça doit marcher, mais pas comme tu dis.
A mon avis le calcul est bien affiché dans la div mais pas dans l'input, vu que le seul endroit ou tu l'affiches c'est là:

Code :
  1. document.getElementById('total').innerHTML = tt


et que l'objet ayant un id total c'est ton div.
Si tu veux que cela s'affiche dans ton input total, il faut que tu lui demandes [:spamafote]

Reply

Marsh Posté le 25-07-2006 à 22:06:23    

Merci pour les réponses les gars....le pb(et ça je viens de le découvrir) c'esty que ça marche avec Firefox mais pas avec IE...
OK pour les ";" mais on les met ou et quand ces ";" ?
 
sorry mais newbie newbie newbie newbie newbie newbie inside !!!

Reply

Marsh Posté le 26-07-2006 à 08:38:37    

Apparemment ça ça marche :

Code :
  1. <html>
  2. <head>
  3.        <title>Essai JS</title>
  5. <script language=JavaScript>
  6. function Calcule()
  7. {
  8. var c1=document.getElementById('chiffre1').value;
  9. var c2=document.getElementById('chiffre2').value;
  10. var tt=c1*c2
  12. document.getElementById('total').innerHTML = tt;
  14. }
  16. </script>
  17. </head>
  21. <center><h1><hr>
  22. <form name="facture">
  23. Chiffre 1 : <input type="text" id="chiffre1" size="3" onkeyup="Calcule()"><br>
  24. Chiffre 2 : <input type=text id="chiffre2" size="3" onkeyup="Calcule()"><br>
  26. TOTAL : <div id="total"></div>
  30. </form>
  32. </body>
  33. </html>


 
ça vous semble brouillon comme code ?
Si oui, quelqu'un peut me proposer une autre solution SVP ? :hello:


Message édité par snp le 26-07-2006 à 08:39:39
Reply

Marsh Posté le 26-07-2006 à 09:32:39    

nan mais "a la limite" le code javascript il est tolérable, mais ton code html il est à vomir ...

Reply

Marsh Posté le 26-07-2006 à 09:46:06    

même DW il fait pas des trucs pareils :D

Reply

Marsh Posté le 26-07-2006 à 10:11:57    

je me suis pas attardé sur le code HTML : c'est une copie d'un code trouvé sur le net...je n'avais modifié que la partie js !
mais de là à dire qu'il est a vomir....y'a que 5 lignes !!!!
 
Merci pour les infos

Message cité 1 fois
Reply

Marsh Posté le 26-07-2006 à 10:11:57   

Reply

Marsh Posté le 26-07-2006 à 10:24:24    

snp a écrit :

je me suis pas attardé sur le code HTML : c'est une copie d'un code trouvé sur le net...je n'avais modifié que la partie js !
mais de là à dire qu'il est a vomir....y'a que 5 lignes !!!!
 
Merci pour les infos


Le probléme, c'est que les balises ne sont pas toutes fermés (<center> et <h1> ) que le titre principal contient un formulaire (depuis quand un formulaire est un titre?)
<H1> est un élément de type "block", qui n'est censé contenir que des éléments de type "inline".
tes éléments "input" n'ont pas de propriété "name", propriété obliguatoire pour cet élément même si c'est une propriété déprécié pour quasiment tous les autres.
 
En bref, c'est un code html qui n'est pas valide.

Message cité 1 fois
Reply

Marsh Posté le 26-07-2006 à 10:39:51    

moi en prem's j'aurais mis l'absence de balise ouvrante body :o

Reply

Marsh Posté le 26-07-2006 à 10:41:48    

tiens d'ailleurs, c koi exactement la différence entre "name" et "id" ??

Reply

Marsh Posté le 26-07-2006 à 10:47:01    

omega2 a écrit :

Le probléme, c'est que les balises ne sont pas toutes fermés (<center> et <h1> ) -> OK
que le titre principal contient un formulaire (depuis quand un formulaire est un titre?)  :non: là je vois pas de koi tu parles
<H1> est un élément de type "block", qui n'est censé contenir que des éléments de type "inline".-> OK
tes éléments "input" n'ont pas de propriété "name", propriété obliguatoire pour cet élément même si c'est une propriété déprécié pour quasiment tous les autres.-> voir mon msg précédent
 
En bref, c'est un code html qui n'est pas valide.


 
Bon c'est vrai tout ça mais je répète que je l'ai copié-collé-bidouillé d'un site....

Reply

Marsh Posté le 26-07-2006 à 10:48:50    

Si tu écris:

Code :
  1. <h1><form>...


tu mets dans la balise H1 ( titre de la page une formulaire)
 
Enfin normalement la démarche c'est:

  • copié
  • analysé
  • compris
  • modifié selon mes besoins
  • collé

[:spamafote]


Message édité par anapajari le 26-07-2006 à 10:49:22
Reply

Marsh Posté le 26-07-2006 à 10:58:44    

Ah !!!!!!! OK
je m'étais attardé sur la balise <title> !
autant pour moi...
mais bon, si il fo s'amuser a refaire tte une mise en page pour tester un formulaire ! ça c'est fait après, une fois le principe compris.
si le code avait fait 300 lignes, je dis pas mais là....
j'en tiendrais compte pour la suite....
merci en tout cas !
 
euh....et pour la différence entre entre "name" et "id" ??


Message édité par snp le 26-07-2006 à 10:59:37
Reply

Marsh Posté le 26-07-2006 à 11:28:59    

sinon, autre question mais j'ai pas envie de recréér un post pour ça :
avec le code ci-dessous j'arrive pas à avoir mon TOTAL et le résultat de mon "div" sur la même ligne.

Code :
  1. <div align="center" class="IntraBE2">TOTAL = <div id="addition"></div></div>


y'a une astuce ?

Message cité 1 fois
Reply

Marsh Posté le 26-07-2006 à 11:35:50    

id permet principalement :
- de nomer chaque élément de maniére unique
- d'appliquer les régles d'affichage en css  
- d'identifier unitairement chaque élément en javascript (getElementById) afin de leur appliquer un traitement.
 
Quand on valide un formulaire, "name" permet de nomer les données au moment de leur envoie au serveur.

Reply

Marsh Posté le 26-07-2006 à 11:36:49    

snp a écrit :

sinon, autre question mais j'ai pas envie de recréér un post pour ça :
avec le code ci-dessous j'arrive pas à avoir mon TOTAL et le résultat de mon "div" sur la même ligne.

Code :
  1. <div align="center" class="IntraBE2">TOTAL = <div id="addition"></div></div>


y'a une astuce ?

oui, mettre un '<span id="addition">' au lieu d'un '<div id="addition">'.

Reply

Marsh Posté le 26-07-2006 à 11:40:02    

Les gars : CHAPEAU !! réactifs et précis ...!
Merci bp pour tes explications omega2, a chaque fois tu fais mouche !
Bonne continuation !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed