innerhtml et Onclick incompatible

**nono662** · 19/03/2010, 16h41

Bonjour chers amis développeurs,

Le premier souci est réglè, maintenant, j'en ai un second, voir en bas.

J'aimerais mettre dans la fonction innerhtml, la fonction onclick, malheureusement, ça ne marche pas.
Après avoir lu quelques topics, je pensais qu'il s'agissait des quotes mais même là, je n'y arrive pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	l.insertCell(l.cells.length).innerHTML='<input type="text" size="10" name="couleur[]" name="f_color"  maxlength="7"><img src="Img/color.gif" onClick="fctShow(document.objForm.f_color)">';

Bien sur tout marche hors du JavaScript.
Ca me permet d'afficher une palette de couleur. j'ai récupéré le code à cet endroit)
Là, il s'agit du code html classique, dans ce cas, ça marche parfaitement.
J'arrive à afficher les couleurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form name="objForm" method="post" action="?">
<input type="text" size="10" name="f_color" value="" maxlength="7">
<img src="Img/color.gif" onClick="fctShow(document.objForm.f_color);">
</form>

Par contre, dès que je l'implémente dans le JS, ça me marche plus. (bien sur, j'utilise le même nom de formulaire, l'ironie de l'histoire, c'est que si j'inclue le 1er formulaire (sans php) dans le second avec l'appel JS, ça affiche la palette mais ça "marque" la couleur dans le premier formulaire et rien dans le second)

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
77
78
79
80
81
82
<form name="objForm" method="post" action="?">
 
			<tr>	<th>N°</th>
			<th>Mot</th>
 
					<th>Lien</th>
 
					<th>Titre</th>
					<th>Couleur</th>
					<th>taille</th>
 
					<th><input 	type="button"
 
									onclick="ajout();"
 
									value="Ajouter" /></th>
 
 
		</table>
 
 
<INPUT TYPE="submit" NAME="envoyer" VALUE=" Envoyer ">
 
<script type="text/javascript">
 
		var tab=document.getElementById("tableau");
 
		function suppression(btn)
 
		{	tab.deleteRow(btn.parentNode.parentNode.rowIndex);
 
			for ( var l=1;l<tab.rows.length;l++ )
 
			{	tab.rows[l].cells[0].innerHTML=l;	}
 
		}
 
		function ajout()
 
		{	var l = tab.insertRow(tab.rows.length);
 
			var c=l.insertCell(l.cells.length);
 
				c.innerHTML=l.rowIndex;
 
			l.insertCell(l.cells.length).innerHTML=
 
				"<input type='text' size='10' name='mot[]' />";
 
			l.insertCell(l.cells.length).innerHTML=
 
				"<input type='text' size='10' name='lien[]' />";
 
			l.insertCell(l.cells.length).innerHTML=
 
				"<input type='text' size='10' name='titre[]' />";
 
				l.insertCell(l.cells.length).innerHTML='<input type="text" size="10" name="f_color" value="" maxlength="7"><img src="Img/color.gif" onClick="fctShow(document.objForm.f_color);">';
 
 
					l.insertCell(l.cells.length).innerHTML=
 
				"<input type='text' size='10' name='taille[]' />";
 
 
 
			l.insertCell(l.cells.length).innerHTML=
 
				"<input type='button' value='Supprimer' onclick='suppression(this);' />";
 
			l.onmouseover=function()
 
			{	this.style.backgroundColor="#FFFFDD";	}
 
			l.onmouseout=function()
 
			{	this.style.backgroundColor="transparent";	}
 
		}
</script>
 
</form>

Donc maintenant, ça marche lorsque la première ligne est créée, ensuite, non (la palette de couleur s'affiche mais ça "n'écrit pas" dans le input text la valeur (même pour le premier), je suppose que cela vient du fait que j'utilise plusieurs fois le name = f_color.

Je pensais mettre un compteur mais je ne m'en sors pas :/

Merci d'avance de vos réponses

**SpaceFrog** · 19/03/2010, 16h48

Et dire que l'on me soutient régulièrement que innerHTML c'est bien ...

Passe par le DOM poru créer des elements sur ta page avec document.createElement ...

**nono662** · 19/03/2010, 16h59

Dom, c'est plus compliqué à utiliser non ?

Et puis, pour le moment, j'aimerais que ça soit rapidement en place, là, il me manque pas grand chose pour que ça marche et j'aimerais comprendre pourquoi...

**SpaceFrog** · 19/03/2010, 17h01

quelques éléments de réponse par là ...
http://www.developpez.net/forums/d53...e+pas+que+form

**nono662** · 19/03/2010, 17h41

Donc, ça peut facilement remplacer les innerhtml sans trop de soucis ?

Ca peut être intéressant.

Même si j'avoue que j'aimerais comprendre ce qui cloche dans ma fonction ù_ù

Merci

**Bovino** · 19/03/2010, 18h41

Ben pour résumer, ce qui cloche c'est que la méthode porte judicieusement le nom de innrtHTML, pas innerJavaScript

**nono662** · 19/03/2010, 23h10

Pourtant ça marche avec des "alert"

**Auteur** · 20/03/2010, 15h22

bonjour,

moi je me pose deux questions :
- que vient faire la balise <form> au milieu du tableau ?
- ensuite le paramètre de ta fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fctShow(document.objForm.f_color)

tu ne peux pas transmettre l'id de l'input en question plutôt que d'utiliser cette syntaxe qui donne des boutons à tout le monde

?

=> moi je vois une sacrée différence entre le code classique et le code généré...

**Gatsu35** · 20/03/2010, 23h14

Envoyé par SpaceFrog

Et dire que l'on me soutient régulièrement que innerHTML c'est bien ...

Passe par le DOM poru créer des elements sur ta page avec document.createElement ...

Quand tu bosseras sur de l'optimisation de génération de contenus HTML tu comprendras pourquoi on dit que innerHTML c'est bien

**kimjoa** · 20/03/2010, 23h38

j'ai essayé ca sans probleme.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id='test'>lien</div>
</body> 
 
   <script type="text/javascript">
    function test(){
	    alert('ok');
	}
 
    document.getElementById('test').innerHTML='<input type="text" size="10" name="couleur[]" name="f_color"  maxlength="7"><img src="logo.png" onClick="test()">';
   </script>

Que te dit firebug ou ta console d'erreur?

Citation:
Envoyé par SpaceFrog Voir le message
Et dire que l'on me soutient régulièrement que innerHTML c'est bien ...

Passe par le DOM poru créer des elements sur ta page avec document.createElement ...
Quand tu bosseras sur de l'optimisation de génération de contenus HTML tu comprendras pourquoi on dit que innerHTML c'est bien

Pense que SpaceFrog serait d'accord avec toi, si seulement la génération via innerHTML n'était pas si beugé. Puis les deux ont leur avantage et inconvénient.

Avec le DOM c'est plus simple de généré des éléments dynamiquement (avec plein d'alternative en fonction de variable). A l'inverse de innerHTML plus statique

**nono662** · 22/03/2010, 00h11

Envoyé par Auteur

bonjour,

moi je me pose deux questions :
- que vient faire la balise <form> au milieu du tableau ?
- ensuite le paramètre de ta fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fctShow(document.objForm.f_color)

tu ne peux pas transmettre l'id de l'input en question plutôt que d'utiliser cette syntaxe qui donne des boutons à tout le monde

?

=> moi je vois une sacrée différence entre le code classique et le code généré...

Car il était vendredi aprem et j'étais un peu fatigué.

Pour la seconde réponse, à la base, le code ne vient pas de moi et donc je fais de mon mieux pour que ça marche, dur les projets qu'on a pas programmé soit même.

Et je devais vraiment être fatigué car il y a deux noms à l'input, pas mal.

Bon, pas eu le temps de regarder ça ce week end donc pour le reste, je regarderais ça demain.

**nono662** · 22/03/2010, 10h39

Bon, ça marche plus ou moins.
En fait, faudrait rajouter un compteur pour chaque appel de la fonction, comment puis-je faire ça ?

Car j'aimerais conserver dans un tableau le résultat de chaque ligne.
Merci d'avance.

Là, je bloque sur un truc tout simple mais le javascript ce n'est pas encore mon point fort.

**le_chomeur** · 22/03/2010, 11h23

lol j'adore ce sempiternel débat innerHTML VS DOM ^^

**nono662** · 22/03/2010, 11h26

J'apprends des choses au moins, fin pour le moment innerhtml répond à mes attentes mais le souci vient plutôt de la syntaxe là :/

**nono662** · 22/03/2010, 20h45

Pour ceux que ça intéressent :

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
 
fctShow = function(objForm)
{
 if (objForm) {
  objCurrent = objForm;
  if (objForm.value + '' != '') {
   strColor = objForm.value.replace('#', '');
   strColorTxt = '' + fctIsInName(strColor);
   if (strColorTxt == '') {strColorTxt = '' + fctIsInSys(strColor);}
   fctSetColor('#' + strColor, strColorTxt)
  } else {
   fctReset();
  }
  fctSelect('Name', 'Named');
 }
 if (objCurrent) {
  var w = h = t = l = 0;
  if (self.innerHeight) {
   w = self.innerWidth;
   h = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
   w = document.documentElement.clientWidth;
   h = document.documentElement.clientHeight;
  } else if (document.body) {
   w = document.body.clientWidth;
   h = document.body.clientHeight;
  }
  if (self.pageYOffset) {
   l = self.pageXOffset;
   t = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollTop) {
   l = document.documentElement.scrollLeft;
   t = document.documentElement.scrollTop;
  } else if (document.body) {
   l = document.body.scrollLeft;
   t = document.body.scrollTop;
  }
  if (objGlobal.style.display != 'block') {objGlobal.style.display = 'block';}
  objGlobal.style.top = parseInt(((h - objGlobal.offsetHeight) / 2) + t, 10) + 'px';
  objGlobal.style.left = parseInt(((w - objGlobal.offsetWidth) / 2) + l, 10) + 'px';
 }
}

Mais le problème ne vient pas de la fonction en elle même vu qu'elle vient de là et marche parfaitement :

Vous pouvez voir mon formulaire en action là :

http://fotolink.free.fr/gene

**nono662** · 23/03/2010, 13h45

Je m'en suis sorti.

innerhtml et Onclick incompatible

JavaScript

Discussions similaires

Partager

Partager