rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Probleme html/javascript champ d'I/O

Posté par jean, le samedi 18 novembre 2006 à 23:25:38
Bonjour,

j"ai un petit soucis avec un pgm html utilisant un script javascript
le script est tout bete, cetait just pour tester, le but serait a l'aide de la borneinf, bornesup,nbpts,et choix en argument d'entrée, obtenir un resultat(sera par apres une integral) dans le champ "resultat" apres click sur le bouton calculer

merci ;)

voici le code 

<html>

<head>

<title>test<</title>
</head>

<body>
<SCRIPT LANGUAGE="JavaScript">
var borneInf;
var borneSup;
var nbPts;
var rep;
var choix;
function test(borneInf,borneSup,nbPts,choix)
{
	rep= borneInf*borneSup;
	alert(rep);
	return rep;
}

</SCRIPT>
<form name="integral">

	<table border="1" width="30%">
		<tr>
			<td>Borne Supérieure</td>

			<td><INPUT type=text name="borneSup"</td>
		</tr>
		<tr>
			<td>Borne Inférieure</td>
			
			<td><INPUT type=text name="borneInf"</td>
		</tr>
		<tr>
			<td width="200">Nombres de points</td>
			<td><INPUT type=text name="nbPts"</td>
		</tr>


	</table>

	<p align="left">                   
	<select name="choix" size="1">
	<option>Sin</option>
	<option>Cos</option>
	<option>Tan</option>
	<option>Arctg</option>
	</select>

<input type="submit" value="Calculer" onClick="test(document.forms["integral"].born­eInf,document.forms["integral"].borneSup,document.­forms["integral"].nbPts;document.forms["integ­ral"].choix);"</p>
	<table border="1" width="30%" >
	<p>
	<tr>
		<td>Résultats : </td>
		<td width="148">
			
		<input type=text name="res"</td>
	</tr></div>
	</table>
</form>
</div>







 </body></html>
Répondre à jean  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
PhP, le dimanche 19 novembre 2006 à 10:09:24
Bjr

Lorsque tu charges ta page ton navigateur te signale une erreur de syntaxe n'est-ce-pas ? (icône jaune en bas à gauche sous IE)

Tu as commis quelques erreurs ;-( hé oui LOL

D'abord si ton script JavaScript (et pas script JAVA ca n'a rien à voir ) ne modifie pas directement le contenu de la page alors place le dans la partie <head> .. </head>

Ensuite ton problème ici : 

onClick="test(document.forms["integral"].born­eInf,document.forms["integral"].borneSup,document.­forms["integral"].nbPts;document.forms["integ­ral"].choix);"


En JavaScript une chaîne de caractère est délimitée soit par un apostrophe ' soit par un guillemet (double) "

Ce caractère ' ou " doit apparaître au début et à la fin de la chaîne mais surtout pas au milieu autrement l'interpréteur pense qu'elle est finie.

Autrement dit dans ton cas l'interpéteur considère que la fonction asocciée au click est : 

onClick="test(document.forms["
et bien sûr après la suite du code étant incohérente tu obtiens une erreur de syntaxe.

la solution ?
Remplacer les guillemets à l'intérieur par des aprostrophes ou bien mette un anti-slash devant chaque guillemet : dans ce cas l'interpréteur sait qu'il ne s'agit pas de la fin de la chaîne CQFD

onClick="test(document.forms['integral'].borneInf)"­; est valide

onClick="test(document.forms[\"integral\"].bo­rneInf)" est aussi valide

Maintenant sache que document.forms['integral'].borneInf ne te retourne pas directement la valeur contenu dans la variable borneInf mais un objet de type input !
Si tu veux le contenu du champ, tu dois écrire :
document.forms['integral'].borneInf.value

Ca alourdit drôlement la syntaxe du onclick tu ne trouve pas ?

C'est pourquoi dans mon ex je te propose différentes solutions

version 1 :
comme tu as fait : appel à la fonction calcul() en passant tous les paramètres dans le onclick

version 2 :
en déléguant le passage des paramètres à une fonction intermédiaire calcul1()

version 3 :
en déléguant le passage des paramètres à une fonction intermédiaire calcul2() et en utilisant DOM : c'est mieux par contre ca t'oblige à donner des identifiants id="...." en plus des noms à tes champs ex name="borneInf" id="borneInf"
Tes identifiants doivent être unique dans toute ta page ! L'avantage ici c'est que tu te moques bien du nom de ton formulaire car il ne sert pas.


DOM : kézako ? Pas évident à expliquer ... ;-(
Sache que tous les navigateurs modernes lorsqu'il charge une page également appellée document, l'analyse puis stocke tous les éléments/informations du document dans une structure arborescente DOM : Document Object Model.
DOM offre une interface standardisée pour chaque page html à laquelle tu peux ensuite accèder en JavaScript par ex

document.getElementById() est une fonction spécifique qui permet de retrouver un élément par son identifiant dans l'arbre DOM


Autre petite erreur, tes différents paramètres doivent être séparés par une virgule et non pas un point-virgule comme après nbPts : mais il s'agit sans doute d'une faute de frappe LOL

Ensuite si ton formulaire n'est pas destiné à être envoyé remplace le type bouton "submit" par "button"


Ta fonction test() maintenant : en JavaScript tous les paramètres sont local à la fonction. il est donc inutile de les déclarer à l'extérieur de ta fonction avec var ... 


<html>

<head>

<title>test<</title>


<SCRIPT LANGUAGE="JavaScript">

function calcul2()
{
	calcul(document.forms['integral'].borneInf.value,
		document.forms['integral'].borneSup.value,
		document.forms['integral'].nbPts.value,
		document.forms['integral'].choix.value);
}

function calcul3()
{
	calcul(document.getElementById('borneInf').value,
		document.getElementById('borneSup').value,
		document.getElementById('nbPts').value,
		document.getElementById('choix').value);
}

function calcul(borneInf,borneSup,nbPts,choix)
{
	rep= borneInf*borneSup;
	alert(rep);
	return rep;
}


</SCRIPT>

</head>

<body>

<form name="integral">

	<table border="1" width="30%">
		<tr>
			<td>Borne Supérieure</td>

			<td><INPUT type=text name="borneSup" id="borneSup"</td>
		</tr>
		<tr>
			<td>Borne Inférieure</td>
			
			<td><INPUT type=text name="borneInf" id="borneInf"</td>
		</tr>
		<tr>
			<td width="200">Nombres de points</td>
			<td><INPUT type=text name="nbPts" id="nbPts"</td>
		</tr>


	</table>

	<p align="left">                   
	<select name="choix" id="choix" size="1">
	<option value="Sin">Sin</option>
	<option value="Cos">Cos</option>
	<option value="Tan">Tan</option>
	<option value="Arctg">Arctg</option>
	</select>

<input type="button" value="Calculer méthode 1" onClick="calcul(document.forms['integral'].borneInf.val­ue,
document.forms['integral'].borneSup.value,
document.forms['integral'].nbPts.value,
document.forms['integral'].choix.value);">


<input type="button" value="Calculer méthode 2" onClick="calcul2();">

<input type="button" value="Calculer méthode 3" onClick="calcul3();">
</p>
	<table border="1" width="30%" >
	<p>
	<tr>
		<td>Résultats : </td>
		<td width="148">
			
		<input type=text name="res"</td>
	</tr></div>
	</table>
</form>
</div>







 </body></html>

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...
   
Répondre à PhP

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
jean, le dimanche 19 novembre 2006 à 13:03:20
merci pour ces precisions ;)
effectivement, qque petite erreurs...
derniere petite question
comment peut on faire apparaitre le resultat dans le champ resultat maintenant?
pour "capturer" le return du rep de la fonction en fait, merci
   
Répondre à jean

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 PhP, le dimanche 19 novembre 2006 à 13:12:15
Ben tu devrais deviner !

En affectant tout simplement une valeur à sa propriété value .


Bref : 

function calcul(borneInf,borneSup,nbPts,choix)
{
	rep= borneInf*borneSup;
	document.getElementById('res').value = rep,
	return rep;
}


N'oublie pas d'ajouter l'id et de fermer la balise input tant que tu y es : 


<input type=text name="res" id="res"> </td>


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...
   
Répondre à PhP
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Xenu's Link Sleuth 1.2jXenu's Link Sleuth - Xenu's Link Sleuth est un logiciel permettant de vérifier les liens brisés d'un site web. La vérification est effectuée...Catégorie: Webmaster
Licence: Freeware/gratuit
Télécharger Ditto 3.15.4Ditto - Ditto est une extension du presse-papier standard de Windows (clipboard). Il permet de sauver chaque item placé dans le...Catégorie: Gestion de fichiers
Licence: Open Source
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger GreaseMonkey 0.8.20080609.0GreaseMonkey - GreaseMonkey permet de bidouiller à la volée les pages web que vous consultez. C'est à dire qu'il va modifier la page...Catégorie: Extensions Firefox
Licence: Open Source
Plus de logiciels gratuits sur « Probleme html/javascript champ d'I/O »