Fonction dans la même balise qui ne fonctionne plus

**patricktoulon** · 16/11/2015, 22h18

re
oui j'avais compris

**patricktoulon** · 17/11/2015, 10h24

re bonjour a tous

je n'arrive toujours pas a créer la table
j'ai l'impression que la boucle est infinie

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
<html>
  <head>
   <script>
    function init() {
    var mydiv = document.getElementById("content");
    var table = document.createElement("table");
        for (var i = 0; i=7; i=i+1) 
 {
            var tr = document.createElement("tr");
           table.appendChild(tr);
              for (var col = 0; col=8; col=col+1)
              {
                 var td = document.createElement("td");
                 var txt = document.createTextNode("ligne"+i+"col"+col);
                 td.appendChild(txt);
                 /*td.style.border=1+"px";*/
               tr.appendChild(td);
        }
 
 
         }
 
 
     mydiv.appendChild(table);
    }
   </script>
  </head>
 
<body>
    <script>init()</script> 
<div id="content"></div>
 
</body>
</html>

**autran** · 17/11/2015, 10h33

Bonjour Patrick,
je n'ai pas testé ton code mais je te confirme que ta boucle est infinie.
simplement car tu affectes

Code javascript :

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

for (var i = 0; i=7; i=i+1)

à i la valeur 7 hors ce que tu veux c'est que i s’arrête à 7 (non inclus) donc tu dois faire

Code javascript :

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

for (var i = 0; i<7; i=i+1)

A+

**patricktoulon** · 17/11/2015, 10h49

bonjour Autran
ok j'ai pigé

ca ne bloque plus mais toujour pas de creation

**autran** · 17/11/2015, 16h45

Allez Patrick, on change de braquet et on grimpe sur le Faron.

Bref, on utilise comme des pros (mais sans EPO) l'objet table du DOM. Et on prend bien sûr toutes ces méthodes.
Pour ne pas que tu sois largué je gardé les 2 premières et la dernière lignes de ta fonction. j'ai renommé ta fonction pour éviter un conflit avec des mots clefs du langage.
Et bien entendu, je garde tes 2 boucles maintenant que tu as transpiré dessus.
Et voila ce que ca donne

Code javascript :

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
<!doctype html>
<html lang="fr">
	<head>
		<script type="text/javascript">
			function initialise() 
			{
				var mydiv = document.getElementById("content");
				var table = document.createElement("table");
				for (var i = 0; i < 7; i++) 
				{
					var row = table.insertRow(i);
					for (var col = 0; col < 8; col++)
					{
						var cell = row.insertCell(col);
						cell.innerHTML = "ligne"+i+"col"+col;
					}
				 }
				 mydiv.appendChild(table);
			}
		</script>
	</head> 
	<body>
		<div id="content">
			<button onclick="initialise()"> test </button>
		</div> 
	</body>
</html>

Tu remarqueras que si tu maitrises le DOM c'est rapide et concis

**patricktoulon** · 17/11/2015, 16h59

merci Autran

je vais tester et inégrer il manque plus que la formule qui me donne les codes couleurs par une petite operation avec les index colonne et ligne * par hex etc.....je l'avais trouvé mais j'ai fermé la page intempestivement et le cache et temp chez moi est vidé a la fermeture de IE

j'ai une question toute simple parceque tout ca je le fait les yeux fermé avec vbs tout du moins tout ce qu'il peut gérer

alors j'ai beau chercher mais je ne trouve rien

exemple en vbs voir meme vba

on cherche a savoir si il y a un element avec l'id "old"
donc en vb
se sera

set myelem=document.getelementbyid("old")

et si il n'y en a pas pour le savoir c'est

if myelem is nothing then

en version courte sans variable

if document .getelementbyid("old") is nothing then

y a t il quelque chose comme ca en javascript j'ai trouvé des exemples mais ca fonctionne pas de plus c'est pas tres clair la syntaxe des conditions

merci pour le retour je m'en vais tester ta table

et merci pour la patience

je me retrouve débutant

**autran** · 17/11/2015, 17h14

lorsque tu fais :

Code javascript :

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

if(document.getElementById("old"))

La variable document.getElementById("old") retourne un objet, qui, est évalué comme Booléen true. Sinon, il retourne directement le Booléen false.

**patricktoulon** · 17/11/2015, 17h29

re
ok
donc comme vbs je l'avais oublié cette methode dans mon explication en effet l'objet est retourné ou remplacer par le boolean

je vais essayer de l'integrer dans la fonction anonyme

merci beaucoup
et la table c'est nikel je vais essayer de retrouver la formule des couleurs mais j'ai tellement visité de page que j'en ai mal au yeux

**patricktoulon** · 18/11/2015, 19h58

Bonjour a tous ,Autran

Bon voila jai ma palette de couleur dynamique
cela dit le resultat est comment dire heu.... bizzarre

voila j'en avait une ecrite en dur en html avec le hex des couleur comme ID un peu de java script et voila les cellule en couleur tres bien

dans notre exemple j'ai récupéré les couleurs dans un tableau "[]" et je les ai appliquer a notre table tres etonné de ne pas avoir le meme résultat

en suite le this se retrouve indefined dans le alert

voila le code de ma table

on peu m'expliquer la ?

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
<!DOCTYPE html ">
<html lang="fr">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
 
function toto(cc)
{
alert(cc)
}
 
function initialise() 
 
{
var coul=["#FFFFFF","#FFCCCC","#FFCC99","#FFFF99","#FFFFCC","#99FF99","#99FFFF","#CCFFFF","#CCCCFF","#FFCCFF","#CCCCCC","#FF6666","#FF9966","#FFFF66","#FFFF33","#66FF99","#33FFFF","#66FFFF","#9999FF","#FF99FF","#C0C0C0","#FF0000","#FF9900","#FFCC66","#FFFF00","#33FF33","#66CCCC","#33CCFF","#6666CC","#CC66CC","#999999","#CC0000","#FF6600","#FFCC33","#FFCC00","#33CC00","#00CCCC","#3366FF","#6633FF","#CC33CC","#666666","#990000","#CC6600","#CC9933","#999900","#009900","#339999","#3333FF","#6600CC","#993399","#333333","#660000","#993300","#996633","#666600","#006600","#336666","#000099","#333399","#663366","#000000","#330000","#663300","#663333","#333300","#003300","#003333","#000066","#330099","#330033"];
   var mydiv = document.getElementById("content");
    var table = document.createElement("table");
    table.style.border=1+"px solid black"
    table.cellspacing=0;    
    for (var i = 0; i < 7; i++) 
    {
     var row = table.insertRow(i);
     for (var col = 0; col < 10; col++)
     {
      var cell = row.insertCell(col);
 
     /cell.innerHTML = "l "+i+"col "+col;/
      cell.style.border=1+"px solid black";
      cell.style.width=20+"px";
      cell.style.height=20+"px";
      cell.style.backgroundColor =coul[(col+1)*(i+1)];
      cell.onclick=function()
        {
        toto(coul[(col+1)*(i+1)]);
        }
 
 
     }
     }
     mydiv.appendChild(table);
   }
  </script>
 </head> 
 <body>
  <button onclick="initialise()"> test </button>
  <div id="content">
 
  </div> 
 </body>
</html>

et voila le code de la table que j'ai pris pour exemple

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="cp">
<head>
 <title>RTE Color Palette</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <script type="text/javascript">
 <!--
 function selectColor(color) {
  self.parent.setColor(color);
 }
 
 function InitColorPalette() {
  if (document.getElementsByTagName)
   var x = document.getElementsByTagName('TD');
  else if (document.all)
   var x = document.all.tags('TD');
  for (var i=0; i < x.length; i++) {
   x[i].onmouseover = over;
   x[i].onmouseout = out;
   x[i].onmousedown = down;
   x[i].style.background = '#' + x[i].id.replace('RTE_', ''); 
  }
 }
 
 function over() {
  this.style.border = '1px solid #FFF';
  this.style.cursor = 'hand';
  this.style.cursor = 'pointer';
 }
 
 function out() {
  this.style.border = '1px solid #000';
  this.style.cursor = 'default';
 }
 
 function down() {
  selectColor('#' + this.id.replace('RTE_', ''));
 }
 //-->
 </script>
 <style type="text/css"> 
 body {
  background: #FFF;
  margin: 0;
 }
 table {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
 }
 td {
  font-size: 4px;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
 } 
 </style> 
</head>
<body onload="InitColorPalette()">
<table cellpadding="0" cellspacing="0">
 <tr>
  <td id="RTE_FFFFFF">&nbsp;</td>
  <td id="RTE_FFCCCC">&nbsp;</td>
  <td id="RTE_FFCC99">&nbsp;</td>
  <td id="RTE_FFFF99">&nbsp;</td>
  <td id="RTE_FFFFCC">&nbsp;</td>
  <td id="RTE_99FF99">&nbsp;</td>
  <td id="RTE_99FFFF">&nbsp;</td>
  <td id="RTE_CCFFFF">&nbsp;</td>
  <td id="RTE_CCCCFF">&nbsp;</td>
  <td id="RTE_FFCCFF">&nbsp;</td>
 </tr>
 <tr>
  <td id="RTE_CCCCCC">&nbsp;</td>
  <td id="RTE_FF6666">&nbsp;</td>
  <td id="RTE_FF9966">&nbsp;</td>
  <td id="RTE_FFFF66">&nbsp;</td>
  <td id="RTE_FFFF33">&nbsp;</td>
  <td id="RTE_66FF99">&nbsp;</td>
  <td id="RTE_33FFFF">&nbsp;</td>
  <td id="RTE_66FFFF">&nbsp;</td>
  <td id="RTE_9999FF">&nbsp;</td>
  <td id="RTE_FF99FF">&nbsp;</td>
 </tr>
 <tr>
  <td id="RTE_C0C0C0">&nbsp;</td>
  <td id="RTE_FF0000">&nbsp;</td>
  <td id="RTE_FF9900">&nbsp;</td>
  <td id="RTE_FFCC66">&nbsp;</td>
  <td id="RTE_FFFF00">&nbsp;</td>
  <td id="RTE_33FF33">&nbsp;</td>
  <td id="RTE_66CCCC">&nbsp;</td>
  <td id="RTE_33CCFF">&nbsp;</td>
  <td id="RTE_6666CC">&nbsp;</td>
  <td id="RTE_CC66CC">&nbsp;</td>
 </tr>
 <tr>
  <td id="RTE_999999">&nbsp;</td>
  <td id="RTE_CC0000">&nbsp;</td>
  <td id="RTE_FF6600">&nbsp;</td>
  <td id="RTE_FFCC33">&nbsp;</td>
  <td id="RTE_FFCC00">&nbsp;</td>
  <td id="RTE_33CC00">&nbsp;</td>
  <td id="RTE_00CCCC">&nbsp;</td>
  <td id="RTE_3366FF">&nbsp;</td>
  <td id="RTE_6633FF">&nbsp;</td>
  <td id="RTE_CC33CC">&nbsp;</td>
 </tr>
 <tr>
  <td id="RTE_666666">&nbsp;</td>
  <td id="RTE_990000">&nbsp;</td>
  <td id="RTE_CC6600">&nbsp;</td>
  <td id="RTE_CC9933">&nbsp;</td>
  <td id="RTE_999900">&nbsp;</td>
  <td id="RTE_009900">&nbsp;</td>
  <td id="RTE_339999">&nbsp;</td>
  <td id="RTE_3333FF">&nbsp;</td>
  <td id="RTE_6600CC">&nbsp;</td>
  <td id="RTE_993399">&nbsp;</td>
 </tr>
 <tr>
  <td id="RTE_333333">&nbsp;</td>
  <td id="RTE_660000">&nbsp;</td>
  <td id="RTE_993300">&nbsp;</td>
  <td id="RTE_996633">&nbsp;</td>
  <td id="RTE_666600">&nbsp;</td>
  <td id="RTE_006600">&nbsp;</td>
  <td id="RTE_336666">&nbsp;</td>
  <td id="RTE_000099">&nbsp;</td>
  <td id="RTE_333399">&nbsp;</td>
  <td id="RTE_663366">&nbsp;</td>
 </tr>
 <tr>
  <td id="RTE_000000">&nbsp;</td>
  <td id="RTE_330000">&nbsp;</td>
  <td id="RTE_663300">&nbsp;</td>
  <td id="RTE_663333">&nbsp;</td>
  <td id="RTE_333300">&nbsp;</td>
  <td id="RTE_003300">&nbsp;</td>
  <td id="RTE_003333">&nbsp;</td>
  <td id="RTE_000066">&nbsp;</td>
  <td id="RTE_330099">&nbsp;</td>
  <td id="RTE_330033">&nbsp;</td>
 </tr>
</table>
</body>
</html>

**autran** · 18/11/2015, 22h33

Patrick,

il y a 2 problèmes :

1/ tu n'affiches pas dans ton tableau les couleurs voulues car ta formule de linéarisation est fausse je te propose celle-ci si tu es d'accord :

Code javascript :

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

cell.style.backgroundColor = coul[10 * i + col];

2/ ton alert() ne renvoie pas de valeur : on s'en occupera si tu es d'accord avec ma formule car les tableaux sont souvent un problème d'indice

**patricktoulon** · 18/11/2015, 23h52

re
bonsoir Autran

et oui tu a raison je ne sais pas pourquoi je suis parti sur cette base de calcul

heureusement que tu es la sinon je cherche toujours hein!!!

bon j'ai injecté la formule dans toto et effectivement ca ne fonctionne pas ,probleme que je n'ai pas en VBS

je vais essayer de comprendre pourquoi

merci du retour

**autran** · 19/11/2015, 06h55

Dans ta fonction anonyme, si tu imprimes tes variables i et col, tu vas vite comprendre pourquoi ça bug
bon courage

**patricktoulon** · 19/11/2015, 09h40

oui bon ben d'apres ce que je constate l'iteration n'est pas respecter dans le onclick j'ai le dernier a chaque fois

il semblerait que cell dans cette ligne se comporte comme une classe d'object

j'ai changé mon fusil d'epaule

j'injecte this et la couleur est comprises dans le id de chaque cellules et ca fonctionne

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
<!DOCTYPE html >
<html lang="fr">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
var coul=["FFFFFF","FFCCCC","FFCC99","FFFF99","FFFFCC","99FF99","99FFFF","CCFFFF","CCCCFF","FFCCFF","CCCCCC","FF6666","FF9966","FFFF66","FFFF33","66FF99","33FFFF","66FFFF","9999FF","FF99FF","C0C0C0","FF0000","FF9900","FFCC66","FFFF00","33FF33","66CCCC","33CCFF","6666CC","CC66CC","999999","CC0000","FF6600","FFCC33","FFCC00","33CC00","00CCCC","3366FF","6633FF","CC33CC","666666","990000","CC6600","CC9933","999900","009900","339999","3333FF","6600CC","993399","333333","660000","993300","996633","666600","006600","336666","000099","333399","663366","000000","330000","663300","663333","333300","003300","003333","000066","330099","330033"];
 
function toto(cc)
{
var couleur=cc.id.replace("pal","#");
var aaa=document.getElementById("plaque");
 
alert(couleur);
aaa.style.backgroundColor=couleur;
}
 
 
function initialise() 
 
{
var c=1;
    var MYBODY= document.body;
    var mydiv = document.createElement("div");
    mydiv.id="PALETTE_COULEUR";
    MYBODY.appendChild(mydiv);
    /*var mydiv = document.getElementById("content");*/
    var table = document.createElement("table");
    table.style.border=1+"px solid black"
    table.cellSpacing=0;    
    for (var i = 0; i < 7; i++) 
    {
     var row = table.insertRow(i);
     for (var col = 0; col < 10; col++)
     {
      var cell = row.insertCell(col);
       c=c+1;
     /cell.innerHTML = "l "+i+"col "+col;/
      cell.style.border=1+"px solid black";
      cell.onmouseover=over;       
      cell.onmouseout=out;       
 
      cell.style.width=15+"px";
      cell.style.height=15+"px";
      cell.style.backgroundColor = "#"+coul[10 * i + col];
      cell.id="pal"+coul[10 * i + col]
      cell.onclick=function()
        {
        toto(this);
        }
 
 
 
 
     }
     }
     mydiv.appendChild(table);
   }
 function over() {this.style.border = '1px solid #FFF';}
 
 function out() {this.style.border = '1px solid #000';}
 
</script>
 </head> 
 <body>
  <button onclick="initialise()"> test </button>
  <!-div id="content">
 
  </div-!> 
 
<br />
<div id="plaque" style="width:100px;height:100px;border:1px solid black;"></div>
</body>
</html>

**autran** · 19/11/2015, 11h05

oui c'est la bonne méthode

car tu click sur une cellule du tableau lorsque ton tableau est entièrement écrit.
Et quant ton tableau est entièrement écrit i et col sont au taquet.

**patricktoulon** · 19/11/2015, 13h09

bon voila j'ai intégré la palette

comme je me sert de selection j'ai du mettre une img dans chaque cellules sinon je perdais la selection pour la cellule

mis je n'arrive pas a les ressérrer meme avec cellSpacing=0

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!doctype html>
<html lang="fr">
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=10" />
<!-meta charset="UTF-8"-!>
  <style>
  #editeur
  {
   width:650px;
   height:500px;
   border:1px solid blue;
  }
 
 
  #ruban
  {
  /height:50px;/
  width:650px;
  display:block;
  border:1px solid green;
  }
 
 
 
</style>
<script type="text/vbscript">
sub codes()
msgbox document.getelementbyID("editeur").innerhtml
end sub 
</script>
 
<script type="text/javascript">
 
/*  INITIALISATION*/   
 
 
createpalette();
 
   function putID_old(ELEM)
   {
     ELEM.id="old";                      
   }
 
   function supp_old()
   {
    var myelem=document.getElementById("old");
     myelem.id="";                      
   }
 
   function quelle_balise()
   {
   return document.selection.createRange().parentElement();
   }
   function selectionne_text()
   {
   /*alert(document.selection.createRange().parentElement().tagName);*/
   return window.getSelection().getRangeAt(0);
   }   
 
 
                        function Backgtexte() 
   {
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
 
    var balise = document.createElement("span");
    balise.style.backgroundColor = "yellow";
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
    selection.insertNode(balise);
 
}
 
 
 
 
                        function texteBiU(BiU) 
   {
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var balise = document.createElement(BiU);
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this);       
 
                                                 }
    selection.insertNode(balise);
 
   }
 
 
                        function texte_couleur(coul) 
   {
    var couleur=coul.replace("pal","#");
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var balise = document.createElement("font");
    balise.color = couleur;
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
    selection.insertNode(balise);
    document.getElementById("PALETTE").style.visibility="hidden";   
   }
 
                        function texte_size(valeur) 
   {
 
    var selection = selectionne_text();
    var selectedText = selection.extractContents();
 
    var balise = document.createElement("span");
    balise.style.fontSize =  valeur+"px";
    balise.appendChild(selectedText);
    balise.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
    selection.insertNode(balise);
   }
 
                        function delformat()
                        {
     var obj= document.getElementById("old");
    var text=obj.outerHTML;
    alert(text);    
    obj.parentNode.insertBefore(document.createTextNode(obj.innerText), obj);
    obj.parentNode.removeChild(obj);
 
                         }
                         function insert_liste(typliste)
                        {
     var selection = selectionne_text();
    var selectedText = selection.extractContents();
    var baliseol = document.createElement(typliste);
    var baliseli = document.createElement("li");
    baliseli.onclick = function () 
 
                                                 {
                                                  if(document.getElementById("old")){
        supp_old();
        }
 
       putID_old(this); 
                                                 }
 
    baliseli.appendChild(selectedText);
    baliseol.appendChild(baliseli);
 
    selection.insertNode(baliseol);
   }
 
 
   function aligne(cote)
                        {
    var bal=quelle_balise();
 
    if(bal.tagName="p"){
    bal.style.textAlign = cote;
    }
   }
 
 
function affiche_palette(bT)
{
var leleft=document.getElementById("txtcoul").style.left
var pal=document.getElementById("PALETTE");
pal.style.visibility="visible";
pal.style.position = 'absolute';
pal.style.right = null;
pal.style.left = leleft;
}   
 
 
    function createpalette()
    {
 
var coul=["FFFFFF","FFCCCC","FFCC99","FFFF99","FFFFCC","99FF99","99FFFF","CCFFFF","CCCCFF","FFCCFF","CCCCCC","FF6666","FF9966","FFFF66","FFFF33","66FF99","33FFFF","66FFFF","9999FF","FF99FF","C0C0C0","FF0000","FF9900","FFCC66","FFFF00","33FF33","66CCCC","33CCFF","6666CC","CC66CC","999999","CC0000","FF6600","FFCC33","FFCC00","33CC00","00CCCC","3366FF","6633FF","CC33CC","666666","990000","CC6600","CC9933","999900","009900","339999","3333FF","6600CC","993399","333333","660000","993300","996633","666600","006600","336666","000099","333399","663366","000000","330000","663300","663333","333300","003300","003333","000066","330099","330033"];
 
    var MYBODY= document.body;
    var mydiv = document.createElement("div");
    mydiv.id="PALETTE";
    mydiv.style.backgroundColor = "gray";
    mydiv.style.visibility="hidden"
    MYBODY.appendChild(mydiv);
    /*var mydiv = document.getElementById("content");*/
    var table = document.createElement("table");
    table.style.border=1+"px solid black"
    table.cellSpacing=0;    
    for (var i = 0; i < 7; i++) 
    {
     var row = table.insertRow(i);
     for (var col = 0; col < 10; col++)
     {
      var cell = row.insertCell(col);
 
 
      cell.unselectable="on";
 
      /*cell.style.width=15+"px";*/
      /*cell.style.height=15+"px";*/
      var myimg=document.createElement("img");
      cell.appendChild(myimg);
      myimg.style.width=15+"px"
      myimg.style.height=15+"px";    
      myimg.style.border=1+"px solid black";
      myimg.style.backgroundColor = "#"+coul[10 * i + col];
      myimg.id="pal"+coul[10 * i + col];
      myimg.onmouseover=over;       
      myimg.onmouseout=out;       
      myimg.onclick=function()
        {
 
        texte_couleur(this.id);
        }
 
 
     }
     }
     mydiv.appendChild(table);
   }
 
 function over() {this.style.border = '1px solid #FFF';}
 
 function out() {this.style.border = '1px solid #000';}
 
</script>
 
</head>
<body>
 
 
<div id="ruban">  
<button onclick="texteBiU('b')">Bolder</button>
  <button onclick="texteBiU('i')">italic</button>
  <button onclick="texteBiU('u')">souligné</button>
  <button onclick="texteBiU('s')">texte barré </button>
  <button onclick="aligne('left')">aligne a gauche</button>
  <button onclick="aligne('center')">centrer</button>
  <button onclick="aligne('right')">aligne a droite</button>
 
<button id="txtcoul" onclick="affiche_palette(this)">texte en couleur </button>
  <button onclick="Backgtexte()">bacground texte</button>
        <button onclick="insert_liste('ol')">liste1.2.3</button>
               <button onclick="insert_liste('ul')">liste normale</button>
 
<select id="ListeElement" onchange="texte_size(this.value);"> 
   <option value=8>size 8</option> 
   <option value=10>size 10</option> 
   <option value=12>size 12</option> 
   <option value=14>size 14</option> 
   <option value=16>size 16</option> 
   <option value=18>size 18</option> 
   <option value=20>size 20</option> 
   <option value=22>size 22</option> 
   <option value=24>size 24</option> 
   <option value=26>size 26</option> 
   <option value=28>size 28</option> 
   <option value=30>size 30</option> 
   <option value=34>size 34</option> 
   <option value=40>size 40</option> 
   <option value=50>size 50</option> 
   <option value=60>size 60</option> 
   <option value=70>size 70</option> 
   <option value=80>size 80</option> 
</select>
 <button onclick="delformat()">del format</button>
<button onclick="codes()">codehtml</button>
 
</div>
 
<div id="editeur" contenteditable="true" >
   <p>tapez votre texte </p>
<p>tapez UN AUTRE texte </p>  
</div>
<script>createpalette()</script>
</body>
</html>

**autran** · 19/11/2015, 18h03

Dans ta fonction affiche_palette(), tu n'utilises jamais le paramètre Bt. Donc ce paramètre ne sert à rien.

Je pense que ton idée de mettre des images dans ton tableau ne sert à rien non plus à part te compliquer la vie et te retrouver en face d'autres problématique liées à l'affichage et au redimensionnement de <IMG> dans des <TABLE>. Il te suffit dans ta fonction anonyme de passer la couleur de fond de la cellule que tu sélectionnes. d'autant que comme ça tu as déjà une belle palette.
en 40 lignes ça donne :

Code javascript :

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
<!DOCTYPE html ">
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript">
 
			function initialise() 
			{
				var coul=["#FFFFFF","#FFCCCC","#FFCC99","#FFFF99","#FFFFCC","#99FF99","#99FFFF","#CCFFFF","#CCCCFF","#FFCCFF","#CCCCCC","#FF6666","#FF9966","#FFFF66","#FFFF33","#66FF99","#33FFFF","#66FFFF","#9999FF","#FF99FF","#C0C0C0","#FF0000","#FF9900","#FFCC66","#FFFF00","#33FF33","#66CCCC","#33CCFF","#6666CC","#CC66CC","#999999","#CC0000","#FF6600","#FFCC33","#FFCC00","#33CC00","#00CCCC","#3366FF","#6633FF","#CC33CC","#666666","#990000","#CC6600","#CC9933","#999900","#009900","#339999","#3333FF","#6600CC","#993399","#333333","#660000","#993300","#996633","#666600","#006600","#336666","#000099","#333399","#663366","#000000","#330000","#663300","#663333","#333300","#003300","#003333","#000066","#330099","#330033"];
				var mydiv = document.getElementById("content");
				var table = document.createElement("table");
				table.style.border=1+"px solid black"
				table.cellspacing=0;    
				for (var i = 0; i < 7; i++) 
				{
					var row = table.insertRow(i);
					for (var col = 0; col < 10; col++)
					{
						var cell = row.insertCell(col);
 
						/cell.innerHTML = "l "+i+"col "+col;/
						cell.style.border=1+"px solid black";
						cell.style.width=20+"px";
						cell.style.height=20+"px";
						cell.style.backgroundColor =coul[10 * i + col];
						cell.onclick = function()
						{
							alert(this.style.backgroundColor);
						}
					}
				}
				mydiv.appendChild(table);
			}
		</script>
	</head> 
	<body>
		<button onclick="initialise()"> test </button>
		<div id="content"></div> 
	</body>
</html>

**patricktoulon** · 19/11/2015, 19h00

re
et non tu n'a pas compris ce que j'au voulu dire

quand tu clique sur une cellule la selection de texte dans le div editable est perdu car la selection devient le contenu de la cellule vide ou pas
c'est balo hein!... tandis que le clic sur une img ou bouton ne fait pas perdre la selection de texte dans le div

**autran** · 19/11/2015, 23h08

Je planche dessus
Mais déjà cell.unselectable="on"; ne sert à rien comme ça. Je viens de le tester.

**patricktoulon** · 20/11/2015, 12h42

Bonjour Autran
je n'est pas cherché mais je pense que si il y a getselection il y a aussi setselection non?

memoriser getselection et au clic de la cell setsection (selectedtext) mais ca fait beaucoup pour une selection en couleur je trouve

**autran** · 20/11/2015, 13h00

Bonjour Patrick,

Je trouve aussi. Mais tu remarqueras que passer par des images c'est un peu une usine à gaz. Car tu rencontres des problèmes d'affichage. Donc pour moi, c'est la fuite en avant.

En revanche je pense que l'on pourrait changer l'angle d'attaque en enregistrant la sélection du texte quelque part et en récupérant simplement au click sur le tableau de couleur, la couleur choisie puis en retrouvant quelque part le texte enregistré pour lui appliquer la nouvelle couleur.

Mais au final tu choisiras ta propre méthode car comme tout artiste, tu restes maitre de ton œuvre

Pour ma part je vais essayer ça ce soir et je te raconterai.

Fonction dans la même balise qui ne fonctionne plus

JavaScript

Discussions similaires

Partager

Partager