[DOM] pb execution innerHTML sous firefox

Version imprimable

Bonjour à tous,

Je suis actuellement en train de coder une page ou par défaut on a un champ texte inactif, si on clique sur le bouton "modifier" cela active le champs texte et en plus cela fais apparaitre "valider" et "annuler" à la place du bouton "modifier".

Sous Internet explorer cela marche sans problème (IE7, je n'ai que ça sous la main), par contre quand j'essaye de l'executer sous Firefox, quand je clique sur le bouton "modifier" rien ne se passe. Cela fais maintenant une heure que je tourne et cherche l'erreur de syntaxe qu'il doit y avoir mais je ne trouve pas de réponse.

Si vous voulez bien me donner un coup de main, voici le code de la page en question.

CSS:

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
img {
border: 0px;
}
 
a {
text-decoration: none;
color: black;
}
 
a.info 
{
position: relative;
text-decoration: none;
color: black;
}
 
a.info:hover
{
z-index:25; 
background: none;
}
 
a.info span
{
position: absolute;
left: -5000px;
}
 
a.info:hover span
{ 
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 150px;
border: 2px solid red;
background: orange;
text-align: justify;
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: white;
padding: 7px;
}
 
.validerModif{
position: relative;
display: inline;
}
 
a.choixElement span {
position: absolute;
left: -5000px;
}
 
a.choixElement:active span {
position: absolute;
left: 0px;
}

HTML:

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
 
<?xml version="1.0" encoding="iso-8859-1"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="general.css" media="all" />
<script language='Javascript'>
function afficheBoutons(demande,adminConcerne) {
if (demande == 1){
alert("nom"+adminConcerne);
document.getElementById("nom"+adminConcerne).disabled=false;
document.getElementById("choixAdmin"+adminConcerne).innerHTML="<span><input type='submit' class='validerModif' name='valider' value='valider'> <input type='button' name='annuler' value='annuler' onClick='afficheBoutons(2,"+adminConcerne+")'>";
 
}
if (demande == 2){
document.getElementById("nom"+adminConcerne).disabled=true;
document.getElementById("choixAdmin"+adminConcerne).innerHTML="<input type='button' name='modifier' value='modifier' onClick='afficheBoutons(1,1)'>";
 
}
}
</script>
</head>
<body>
<p>Survolez le mot <a class="info" href="#"><span> vous avez ici plus d'informations sur l'aide que nous pouvons vous apporter </span><img src="aide.gif"/> </a></p>
<p><input type="text" name="nom1" value="user1" disabled /> <span id="choixAdmin1"><input type="button" name="modifier" value="modifier" onClick="afficheBoutons(1,1)"></span></p>
</body>

17/09/2007, 20h44
denisC

Des inputs en dehors de form, c'est pas une bonne idée (c'est même une erreur HTML).

Sinon, FFx prefere le DOM au innerHTML. Mais les deux devraient fonctionner.
17/09/2007, 20h52
Bisûnûrs

Regarde ce topic, il peut t'aider :

http://developpez.net/forums/showthread.php?t=253088
18/09/2007, 09h58
durthu

j'ai essayé de rajouter des balises <form> autour des <input> mais cela ne change rien.

pour ce qui est de l'utilisation de node, je ne comprends pas bien comme cela marche du coup je n'arrive pas à traduire mon code actuel en innerHTML en une version qui utiliserait les noeuds...

pour ce qui est du thread mis en lien, vous allez dire que je suis nul, mais je n'y comprend rien et je ne vois même pas le lien avec mon problème...

excusez ma mauvaise connaissance de javascript ...

Finalement, j'ai repris le fichier en question depuis le début...

et là cela marche, il s'agit donc sûrement d'une erreur de syntaxe dans le javascript...

au cas où cela pourrait servir à certains d'entre vous je poste le code qui marche:

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
<?xml version="1.0" encoding="iso-8859-1"?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<SCRIPT language=javascript>
function go(adminConcerne){
document.getElementById("nom"+adminConcerne).disabled = false;
document.getElementById("modif"+adminConcerne).innerHTML = "<input type='button' name='valider' value='valider'></input><input type='button' name='annuler' value='annuler' onClick='annulation("+adminConcerne+")'></input>";
}
 
function annulation(adminConcerne){
document.getElementById("nom"+adminConcerne).disabled = true;
document.getElementById("modif"+adminConcerne).innerHTML = "<a href='#' onClick='go("+adminConcerne+")'>go</a>";
}
 
</SCRIPT>
</head>
<body>
 
<form>
<input type='text' name='element1' id='nom1' value='youpi' disabled></input>
<span id="modif1"><a href="#" onClick='go(1)'>go</a></span>
<br/><br/><input type='text' name='element2' id='nom2' value='youpi2' disabled></input>
<span id="modif2"><a href="#" onClick='go(2)'>go</a></span>
</form>
</body>
 
</html>