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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : affichage dynamique d'un calcul dans une balise (newbie inside)

snp

quand on sait pas, on se tait

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 :

<html>
<head>
<title>Essai JS</title>
<script language=JavaScript>
function Calcule()
{
var c1=document.getElementById('chiffre1').value
var c2=document.getElementById('chiffre2').value
var tt=c1*c2
document.getElementById('total').innerHTML = tt
}
</script>
</head>
<center><h1><hr>
<form name="facture">
Chiffre 1 : <input type="text" id="chiffre1" size="3" onkeyup="document.getElementById('rappel_chiffre1').innerHTML = this.value;"><br>
Chiffre 2 : <input type=text id="chiffre2" size="3" onkeyup="Calcule()"><br>
Total : <input type=text name="total" size="3" readonly=1>
<br>
<br>
<br>
<div id="rappel_chiffre1"></div>
TOTAL : <div id="total"></div>
<br>
<input type=button value="Calculer" onClick="Calcule()">
</form>
</body>
</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

Publicité

Arjuna

Aircraft Ident.: F-MBSD

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

dwogsi

Défaillance cérébrale...

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?

Arjuna

Aircraft Ident.: F-MBSD

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

:sarcastic:

(qu'est-ce qu'il faut pas dire comme âneries pour plaire à Masklinn...)

anapajari

s/travail/glanding on hfr/gs;

snp a écrit :

Code :

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

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 :

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]

snp

quand on sait pas, on se tait

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

snp

quand on sait pas, on se tait

Apparemment ça ça marche :

Code :

<html>
<head>
<title>Essai JS</title>
<script language=JavaScript>
function Calcule()
{
var c1=document.getElementById('chiffre1').value;
var c2=document.getElementById('chiffre2').value;
var tt=c1*c2
document.getElementById('total').innerHTML = tt;
}
</script>
</head>
<center><h1><hr>
<form name="facture">
Chiffre 1 : <input type="text" id="chiffre1" size="3" onkeyup="Calcule()"><br>
Chiffre 2 : <input type=text id="chiffre2" size="3" onkeyup="Calcule()"><br>
TOTAL : <div id="total"></div>
</form>
</body>
</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

anapajari

s/travail/glanding on hfr/gs;

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

Arjuna

Aircraft Ident.: F-MBSD

même DW il fait pas des trucs pareils

snp

quand on sait pas, on se tait

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

Publicité

omega2

snp a écrit :

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

anapajari

s/travail/glanding on hfr/gs;

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

snp

quand on sait pas, on se tait

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

snp

quand on sait pas, on se tait

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

anapajari

s/travail/glanding on hfr/gs;

Si tu écris:

Code :

<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

snp

quand on sait pas, on se tait

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

snp

quand on sait pas, on se tait

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 :

<div align="center" class="IntraBE2">TOTAL = <div id="addition"></div></div>

y'a une astuce ?

Message cité 1 fois

omega2

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.

omega2

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 :

<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">'.

snp

quand on sait pas, on se tait

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Calcul automatique de champs texte	Modifier l'affichage du Statut punbb
PHP Affichage sur plusieurs pages	HTML Image Affichage
Requete Count() et affichage ASP	affichage video
ajout dynamique de variables dans un objet	Filtres tableau croisé dynamique
affichage de graph, de courbes, d'histogrammes en c++	procédure évenementielle dynamique ?? oui mais...
Plus de sujets relatifs à : affichage dynamique d'un calcul dans une balise (newbie inside)

Page générée en 0.102 secondes