Sujet Précédent Sujet Suivant

Probleme html/javascript champ d'I/O

Fermé
jean - 18 nov. 2006 à 23:25
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 - 19 nov. 2006 à 13:12
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"].borneInf,document.forms["integral"].borneSup,document.forms["integral"].nbPts;document.forms["integral"].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>
A voir également:

3 réponses

Réponse 1 / 3
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
19 nov. 2006 à 10:09
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"].borneInf,document.forms["integral"].borneSup,document.forms["integral"].nbPts;document.forms["integral"].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\"].borneInf)" 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.value,
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>
0
Réponse 2 / 3
jean
19 nov. 2006 à 13:03
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
0
Réponse 3 / 3
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
19 nov. 2006 à 13:12
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>
0

Discussions similaires

symbole arrêt marche
strumpfi -
Raymond PENTIER -

2 réponses
Que signifie ce smiley o/
ausaumon -
ausaumon -

6 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Problème bouton marche/arrêt
Emilyy_1844 -
MPMP10 -

1 réponse
Comment écrire le symbole On/Off
strumpfi -
brucine -

3 réponses