Discussion :

[nono662]

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]

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]

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]

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

[nono662]

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]

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

[Gatsu35]

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]

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