[DOM] pb execution innerHTML sous firefox

**durthu** · 17/09/2007, 17h54

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 css :

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
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 html :

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
 
<?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>

**denisC** · 17/09/2007, 20h44

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.

**Bisûnûrs** · 17/09/2007, 20h52

Regarde ce topic, il peut t'aider :

http://developpez.net/forums/showthread.php?t=253088

**durthu** · 18/09/2007, 09h58

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 ...

**durthu** · 18/09/2007, 11h55

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 :

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
<?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>

[DOM] pb execution innerHTML sous firefox

JavaScript

Discussions similaires

Partager

Partager