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