Une fonction javascript dans un �v�nement onClick

**Lomig** · 12/01/2007, 12h17

Bonjour,
je ne suis pas un sp�cialiste de javascript. J'aimerai inclure un script complet dans un �v�nement onClick (sans faire r�f�rence � une balise <script> dans l'en-t�te de ma page. Cela ne marche pas. Quelqu'un a-t-il une id�e � me proposer. Voici le code :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
  <title>Test javascript</title>
  <meta content="moi" name="GENERATOR">
</head>
 
<body>
  <form name="formtest" method="post" enctype="text/plain" id="formtest">
 
  <input type="text" name="NB1" size="10" value="5" maxlength="10" id="NB1" 
 
 
 
onClick="
function(){
//initialisation des variables
var mini = document.getElementById('NB1').value ;
var maxi = document.getElementById('NB2').value ;
 
	//conditions nécessaires
	if(maxi=="0"){
         document.getElementById('NB3').value="?" ;
        }else if (maxi==""){
         document.getElementById('NB3').value="?";
        }else if (mini==""){
		document.getElementById('NB3').value="?";
	}else{
       //calcul des limites
	     var N1=Math.floor(maxi/3);
		 var N2=N1*2;
		 var N4=maxi;
		 var N3=Math.floor((N2+N4)/2);
 
		 //affichage de l'évaluation
		 if (mini<=N1){
	  document.getElementById('NB3').value="NA" ;
		 }else if (mini<=N2){
	   document.getElementById('NB3').value="ECA" ;
		 }else if (mini<=N3){
	   document.getElementById('NB3').value="A" ;
		 }else if (mini<=N4){
	   document.getElementById('NB3').value="A+" ;
		 }else if (mini>N4){
	   document.getElementById('NB3').value="" ;
		 }
}
}}
">
 
  </form>
</body>
</html>

Je tiens � pr�ciser qu'en fait cette page sera g�n�r�e dynamiquement par PHP .

Merci de votre aide.

**dingoth** · 12/01/2007, 13h16

Sans vouloir te vexer, quelle est l'utilit� d'un tel syst�me ? Ton HTML devient illisible, puisqu'il contient une �norme quantit� de script l� o� il ne faut pas et pas de script l� o� il le faut.

Une fois que j'aurai compris, je pourrai peut-�tre t'aider efficacement

**Auteur** · 12/01/2007, 14h41

Envoy� par dingoth

Sans vouloir te vexer, quelle est l'utilit� d'un tel syst�me ? Ton HTML devient illisible, puisqu'il contient une �norme quantit� de script l� o� il ne faut pas et pas de script l� o� il le faut.

+1

Tu peux toujours mettre ton script dans un fichier externe :

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
 
<html>
  <head>
  <title></title>
 
    <script type="text/javascript" src="MonFichier.js"></script>
 
  </head>
 
  <body>
 
 
  </body>
 
</html>

et �crits ton code dans MonFichier.js.

Ton erreur est au niveau de guillemets : � l'int�rieur de la fonction remplace les " par des '.

**ryan** · 13/01/2007, 11h56

Yop!

Je pense que Lomig veut nous dire qu'il remplacera les points d'interrogation par des variables PHP, et donc qu'il pr�f�re garder le code javascript dans le m�me fichier, ce qui exclut la solution du fichier js.

Donc, et si j'ai bien capt�, le mieux serait d'�crire une fonction javascript dans le HEAD, et d'y faire appel dans l'�v�nement onClick.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title>Test javascript</title>
<meta content="moi" name="GENERATOR">
<script language="javascript">
mafonction()
{
//initialisation des variables
var mini = document.getElementById('NB1').value ;
var maxi = document.getElementById('NB2').value ;
//conditions nécessaires
if(maxi=="0")
  { 
  document.getElementById('NB3').value="<? variable PHP ?>" ;
  }
else if (maxi=="")
  {
   document.getElementById('NB3').value="<? autre variable PHP ?>";
  }
else if (mini=="")
  {
  document.getElementById('NB3').value="<? encore une variable PHP ?>";
  }
else
  {
  //calcul des limites
  var N1=Math.floor(maxi/3);
  var N2=N1*2;
  var N4=maxi;
  var N3=Math.floor((N2+N4)/2);
  //affichage de l'évaluation
  if (mini<=N1)
    {
    document.getElementById('NB3').value="NA" ;
    }
  else if (mini<=N2)
    {
    document.getElementById('NB3').value="ECA" ;
    }
  else if (mini<=N3)
    {
    document.getElementById('NB3').value="A" ;
    }
  else if (mini<=N4)
    {
    document.getElementById('NB3').value="A+" ;
    }
  else if (mini>N4)
    {
    document.getElementById('NB3').value="" ;
    }
  }
}
</script>
</head>
 
<body>
  <form name="formtest" method="post" enctype="text/plain" id="formtest">
   <input type="text" name="NB1" size="10" value="5" maxlength="10" id="NB1" onClick="mafonction()">
 
  </form>
</body>
</html>

Au passage, j'ai enlev� une } du code javascript car il me semblait qu'il y en avait une de trop.

**Lomig** · 14/01/2007, 15h06

Merci pour vos r�ponses.

A l'origine j'avais opt� pour cette solution qui rendait le code plus lisible.

Le probl�me est que php va me g�n�rer plusieurs lignes de 3 input (le premier input: nombre, le deuxi�me input: nombre et le troisi�me r�sultat - donn� par l'�v�nement onClick renvoyant � la fonction).

Ce qui fait planter la fonction car elle n'accepte comme variables que 3 id de 3 input.

Je pensais contourner le probl�me en g�n�rant une fonction diff�rente pour chaque s�rie de 3 input. Mais l� mon petit cerveau bloque ...

**Lomig** · 17/01/2007, 21h11

J'ai finalement opt� pour ce codage javascript (le code source propos� est g�n�r� par php � partir d'une base mysql). Je le propose si cela peut aider quelqu'un. J'ai utilis� "this.form" pour transmettre les variables des inputs au script.

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
<title>Ma page</title>
<script type="text/javascript" language="javascript">
<!--
function evaluer(nForm)
{
var mini = nForm.mini.value*1 ;
var maxi = nForm.maxi.value*1 ;
 
    //conditions nécessaires
	if(maxi=="0"){
	nForm.eval.value ="?";
	}else if (maxi==""){
		nForm.eval.value ="?";
	}else if (mini==""){
		nForm.eval.value ="?";
	}else{
       //calcul des limites
	     var N1=Math.floor(maxi/3);
		 var N2=N1*2;
		 var N4=maxi;
		 var N3=Math.floor((N2+N4)/2);
 
		 //affichage de l'évaluation
		 if (mini<=N1){
 
	   nForm.eval.value ="NA" ;
		 }else if (mini<=N2){
	   nForm.eval.value ="ECA" ;
		 }else if (mini<=N3){
	   nForm.eval.value ="A" ;
		 }else if (mini<=N4){
	   nForm.eval.value ="A+" ;
		 }else if (mini>N4){
	   nForm.eval.value ="" ;
		 }
}
}//fin du script
-->
</script>
</head>
<body>
 
      &Eacute;l&egrave;ve
      <input name='eleve' type='text' id='eleve' value='Benjamin'>
      Score
      <form name="form11" id="form11" action="" method="POST">
      <input name="mini" type="text" class="red2" id="mini"  value="" size="3" maxlength="3">
       sur
      <input name="maxi" type="text" class="red2" id="maxi" value="16" size="3" maxlength="3">
	  &Eacute;valuation
      <input name="eval" type="text" class="red2" id="eval" value="" size="3" maxlength="3" onClick="evaluer(this.form)">
        </form>
	<br>
 
      &Eacute;l&egrave;ve
      <input name='eleve' type='text' id='eleve' value='Camille'>
      Score
      <form name="form11" id="form11" action="" method="POST">
      <input name="mini" type="text" class="red2" id="mini"  value="" size="3" maxlength="3">
       sur
      <input name="maxi" type="text" class="red2" id="maxi" value="16" size="3" maxlength="3">
	  &Eacute;valuation
      <input name="eval" type="text" class="red2" id="eval" value="" size="3" maxlength="3" onClick="evaluer(this.form)">
        </form>
	<br>
 
    </tr>
 
 
  </table>
 
</form>
  </body>
</html>

D�sol� pour l'indentation.

**Macintoc** · 17/01/2007, 21h52

Envoy� par ryan

Je pense que Lomig veut nous dire qu'il remplacera les points d'interrogation par des variables PHP, et donc qu'il pr�f�re garder le code javascript dans le m�me fichier, ce qui exclut la solution du fichier js.

header('Content-Type: application/javascript;') pour g�n�rer un fichier javascript en php, je crois. Le fichier js externe est bien possible

Une fonction javascript dans un �v�nement onClick

JavaScript

Discussions similaires

Partager

Partager