remplacer un lien par un champ text ?

Code:

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
12 var num;
13 var newdiv;
14 var txtsaisi="";
15
16 function chargement() {
17 try {
18 newdiv = document.getElementById("divtxt");
19 newdiv.innerHTML = "&nbsp;<textarea id='textbox' name='textbox' cols='40'
rows='5'></textarea><br /><input type='button' value='ok' onclick='CreerLiens()' />";
20 }
21 catch(err){ }
22 }
23
24 var nbmotsparphrase = new Array();
25 var nbtotalmots;
26
27 function CreerLiens(){
28 try {
29 var numlien="";
30 txtsaisi = document.getElementById("textbox").value;
31 var reg1 = new RegExp('\n',"g");
32 var Lignes = txtsaisi.split(reg1);
33 var nbdelignes = Lignes.length;
34 var txt="";
35 var ligne="";
36 var nbmotsparligne;
37 for (var i=0; i<nbdelignes; i++){
38 // pour chaque ligne on isole la phrase, on l'épure
39
40 Lignes[i] = Lignes[i] +"<br\/>";
41 ligne = Lignes[i];
42
43 var reg2 = new RegExp("[ :;!]+", "g");
44 motsparligne = ligne.split(reg2);
45
46 nbmotsparligne = motsparligne.length;
47
48 nbtotalmots += nbmotsparligne; //mauvais NaN
49 for (var j=0; j<nbmotsparligne; j++){
50 numlien = "b"+i+""+j;
51 motsparligne[j] = "<a href=\"javascript:;\" id=\""+numlien+"\"
onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;"; /* espace
nécessaire */
52
53 txt += motsparligne[j];
54 }
55 }
56 document.getElementById("divtxt").innerHTML = "<div id=\"divLien\">"+txt+
"<\/div>";
57 }
58 catch(err2){ }
59 }
60
61
62 function trouElement(obj){
63 lien = document.getElementById(obj).firstChild.data;
64 var nbCaracteres = lien.length;
65
66 document.getElementById(obj).innerHTML = "<input type='text' style='width:"+7*
nbCaracteres+"px'\/>";
67 }

Bonjour,

Je pense que tu liras ceci avec intérêt :
http://club.developpez.com/regles/

bonjour et bienvenue :)

Citation:

svp au secours, je ne comprends plus rien !! merci de votre aide !

moi non plus , nous parlons pourtant la même langue donc expose nous ton problème en plus de ton code source :)

bonjour,

première remarque :

Code:

//--></script>

ta balise script est en commentaire. Ecris plutôt :
Code:

1 2 3 //--> </script>
Est-ce que le navigateur retourne une erreur ? (Sous Firefox ouvre la console d'erreurs dans le menu Outils).

merci.

Code:

//--></script>

semble n'avoir aucune incidence.
l'erreur retournée est :
Code:

1 2 3 lien00 is not defined onclick(click clientX=37, clientY=92)8W%2BdWP...32A%3D%3D (ligne 2) [Break on this error] trouElement(lien00);

cotes ou guillements

aussi, par ex. dans ce

Code:

motsparligne[j] = "<a href='javascript:;' id=\""+numlien+"\" onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a> ";

je m'embrouille souvent entre les cotes et guillements, connaissez-vous une autre méthode que
Code:

1 2 3 4 5 6 7 1. function addslashes(str) { 2. str=str.replace(/\'/g,'\\\''); 3. str=str.replace(/\"/g,'\\"'); 4. str=str.replace(/\\/g,'\\\\'); 5. str=str.replace(/\0/g,'\\0'); 6. return str; 7. }
?

a.id

c'est drôle,avec numlien =""; :

Code:

numlien = i+""+j

et

Code:

numlien = 1+""+i+""+j

ça fonctionne, mais pas

Code:

numlien = "b"+i+""+j;

ni même

Code:

numlien = "b"+1+i+""+j;

:D

le résultat du programme est l'input dans le texte du lien.. par ex :
Code:

1 2 3 4 <a id="1000" onclick="trouElement(1000)" href="javascript:;"> <input type="text" style="width: 49px;"/> </a> <a id="1010" onclick="trouElement(1010)" href="javascript:;">=</a>
ou alors j'obtiens :
Code:

1 2 3 <input style="width: 96px;"> <a id="1040" onclick="trouElement(1040)" href="javascript:;">"-//W3C//DTD</a> </input>
or, je souhaite remplacer le lien par l'input text, en vain je ne trouve pas le bon node item..
merci

texte à trous

bon, merci à tous pour votre précieuse aide, c'est très gentil.
le programme fonctionne..mais persistent des erreurs, comme cette impossibilité de supprimer entièrement un lien et de le remplacer par un input type text. ceux-ci s'imbriquent !! je crois chercher l'équivalent de l'ancien outerHTML..?

voici le code entier :

Code:

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
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
4 <title>Texte à trous</title>
5 <link rel="shortcut icon" type="image/x-icon" href="jfjr.ico" />
6
7 <script type="text/javascript"><!--
8
9 var Lignes = new Array();
10 var phrases = new Array();
11 var motsparligne = new Array();
12 var num;
13 var newdiv;
14 var txtsaisi="";
15
16 function chargement() {
17 try {
18 newdiv = document.getElementById("divtxt");
19 newdiv.innerHTML = "&nbsp;<textarea id='textbox' name='textbox' cols='40'
rows='5'></textarea><br /><input type='button' value='ok' onclick='CreerLiens()' />";
20 }
21 catch(err){ }
22 }
23
24 var nbmotsparphrase = new Array();
25 var nbtotalmots;
26
27 function CreerLiens(){
28 try {
29 var numlien="";
30 txtsaisi = document.getElementById("textbox").value;
31 var reg1 = new RegExp('\n',"g");
32 var Lignes = txtsaisi.split(reg1);
33 var nbdelignes = Lignes.length;
34 var txt="";
35 var ligne="";
36 var nbmotsparligne;
37 for (var i=0; i<nbdelignes; i++){
38 // pour chaque ligne on isole la phrase, on l'épure
39
40 Lignes[i] = Lignes[i] +"<br\/>";
41 ligne = Lignes[i];
42
43 var reg2 = new RegExp("[ :;!]+", "g");
44 motsparligne = ligne.split(reg2);
45
46 nbmotsparligne = motsparligne.length;
47
48 nbtotalmots += nbmotsparligne; //mauvais NaN
49 for (var j=0; j<nbmotsparligne; j++){
50 numlien = 1+""+i+""+j+""+i;
51
52 motsparligne[j] = "<a href=\"javascript:;\" id=\""+numlien+"\"
onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;"; /* espace
nécessaire */
53
54 txt += motsparligne[j];
55 }
56 }
57 document.getElementById("divtxt").innerHTML = "<div id=\"divLien\">"+txt+
"<\/div>";
58 }
59 catch(err2){ }
60 }
61
62
63 function trouElement(obj){
64 try{
65 var source = document.getElementById(obj);
66 lien = document.getElementById(obj).firstChild.data;
67 var nbCaracteres = lien.length;
68 var fragment = document.createDocumentFragment();
69 var champmot = document.createElement("input");
70 var longmot = "width:"+8*nbCaracteres+"px";
71 champmot.setAttribute("style",longmot);
72
73 champmot.appendChild(source.cloneNode(true));
74 fragment.appendChild(champmot)
75 source.parentNode.replaceChild(fragment, source);
76
77 //document.getElementById(obj).innerHTML = "<input type='text' style='width:"+7*nbCaracteres+"px'\/>";
78 }
79 catch(err3){ }
80 }
81
82 //-->
83 </script>
84 <style type="text/css" media="screen">
85 <!--
86 #conteneur{
87 background: #CED7E7;
88 color: #000;
89 border: 2px solid #ccc;
90 padding: 1em;
91 }
92
93 .imghomepage{
94 width: 20px;
95 height: 20px;
96 }
97
98 img { border:0; }
99
100 #textbox{
101 width:500px;
102 height:200px;
103 }
104
105 #menu{
106 color: #0000FF;
107 }
108
109 a:link {
110 color: #000000;
111 text-decoration: none;
112 font-weight: normal;
113 font-style: normal;
114 }
115
116 a:visited {
117 color: #3399FF;
118 text-decoration: underline;
119 background-color: #FFFFFF;
120 font-weight: normal;
121 font-style: italic;
122 }
123
124 a:hover {
125 color: #0000FF;
126 text-decoration: underline;
127 background-color: #FFFF00;
128 font-style: normal;
129 }
130
131 a:active {
132 color: #FF0000;
133 text-decoration: none;
134 background-color: #CCCCCC;
135 font-weight: bold;
136 font-style: normal;
137 }
138
139 -->
140 </style>
141 </head>
142 <body>
143 <a href="javascript:;" id="menu" onclick="history.go(0);">Clear</a>&nbsp;&nbsp;-
&nbsp;
144 <a href="javascript:;" id="menu" ondblclick="window.location.reload(true);">
Reload (double clic)</a> <br />
145 <div id="conteneur">
146 <img id="addrep" src="flechaddrep.png" />&nbsp;
147 <a href="javascript:;" id="menu" onclick="chargement();">saisir un texte</a><br
/><br />
148 <div id="divtxt"></div>
149 </div>
150 </body>
151 </html>

ou sans les numéros de ligne pour ceux qui préfèrent:

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Texte à trous</title>
<link rel="shortcut icon" type="image/x-icon" href="nad.ico" />
 
<script type="text/javascript"><!--
 
var Lignes = new Array();
var phrases = new Array();
var motsparligne = new Array();
var num;
var newdiv;
var txtsaisi="";
 
function chargement() {
    try {
		newdiv = document.getElementById("divtxt");
		newdiv.innerHTML = "&nbsp;<textarea id='textbox' name='textbox' cols='40' rows='5'></textarea><br /><input type='button' value='ok' onclick='CreerLiens()' />";
	}
	catch(err){ }
}
 
var nbmotsparphrase = new Array();
var nbtotalmots;
 
function CreerLiens(){
	try {
		var numlien="";
txtsaisi = document.getElementById("textbox").value;
		var reg1 = new RegExp('\n',"g");
		var Lignes = txtsaisi.split(reg1);
		var nbdelignes = Lignes.length;
		var txt="";
		var ligne="";
		var nbmotsparligne;
		for (var i=0; i<nbdelignes; i++){
			// pour chaque ligne on isole la phrase, on l'épure
 
			Lignes[i] = Lignes[i] +"<br\/>";
			ligne = Lignes[i];
 
			var reg2 = new RegExp("[ :;!]+", "g");
			motsparligne = ligne.split(reg2);
 
			nbmotsparligne = motsparligne.length;
 
			nbtotalmots += nbmotsparligne;   //mauvais  NaN
			for (var j=0; j<nbmotsparligne; j++){
				numlien = 1+""+i+""+j+""+i;
 
				motsparligne[j] = "<a href=\"javascript:;\" id=\""+numlien+"\" onclick=\"trouElement("+numlien+")\">" + motsparligne[j] + "<\/a>&nbsp;";  /*  espace nécessaire  */
 
				txt += motsparligne[j];
			}
		}
		document.getElementById("divtxt").innerHTML = "<div id=\"divLien\">"+txt+"<\/div>";
  }
	catch(err2){ }
}
 
 
function trouElement(obj){
  try{
	var source = document.getElementById(obj);
	lien = document.getElementById(obj).firstChild.data;
	var nbCaracteres = lien.length;
	var fragment = document.createDocumentFragment();
	var champmot = document.createElement("input");
	var longmot = "width:"+8*nbCaracteres+"px";
	champmot.setAttribute("style",longmot);
 
	champmot.appendChild(source.cloneNode(true));
	fragment.appendChild(champmot)
	source.parentNode.replaceChild(fragment, source);
 
	//document.getElementById(obj).innerHTML = "<input type='text' style='width:"+7*nbCaracteres+"px'\/>";
  }
  catch(err3){ }
}
 
//-->
</script>
<style type="text/css" media="screen">
<!--
#conteneur{
    background: #CED7E7;
    color: #000;
    border: 2px solid #ccc;
    padding: 1em;
}
 
.imghomepage{
	width: 20px;
	height: 20px;
}
 
img { border:0; } 
 
#textbox{ 
	width:500px;
	height:200px;
}
 
#menu{
	color: #0000FF;
}
 
a:link {
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
}
 
a:visited {
    color: #3399FF;
    text-decoration: underline;
    background-color: #FFFFFF;
    font-weight: normal;
    font-style: italic;
}
 
a:hover {
    color: #0000FF;
    text-decoration: underline;
    background-color: #FFFF00;
    font-style: normal;
}
 
a:active {
    color: #FF0000;
    text-decoration: none;
    background-color: #CCCCCC;
    font-weight: bold;
    font-style: normal;
}
 
-->
</style>
</head>
<body>
 <a href="nad.php"><img src="home.png" class="imghomepage" alt="home page" title="home page"/></a>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<a href="javascript:;" id="menu" onclick="history.go(0);">Clear</a>&nbsp;&nbsp;-&nbsp;
	<a href="javascript:;" id="menu" ondblclick="window.location.reload(true);">Reload (double clic)</a>  <br />
<div id="conteneur">
	<img id="addrep" src="flechaddrep.png" />&nbsp;
	<a href="javascript:;" id="menu" onclick="chargement();">saisir un texte</a><br /><br />
	<div id="divtxt"></div>
</div>
</body>
</html>

merci pour vos conseils !