[Résolu] Problème JS getElementById sous Firefox

Bonjour à tous,

J'ai besoin lors du chargement d'un formulaire d'afficher une image. J'ai donc pour cela fait une fonction javascript qui marche très bien sous IE mais pas du tout sous Firefox.
Voici la fonction qui se trouve dans le body :

<script type="text/javascript"><!--
function afficheImg(f)
{
  if(f.elements["img1"][0].checked == true)
  {
   	document.getElementById("textDiv").innerHTML = '<img src="  http://img..."  width="0" height="0">';
  }
  else document.getElementById("textDiv").innerHTML = '';
  return true;
}
//-->
</script>

Afin de l'activer, il y a un :

onSubmit="return afficheImg(this);" 

sur la balise ouvrante du form (pour ça je ne peux pas faire autrement).

Et dans le corps de la page, j'ai bien sûr mes boutons radio :

<input name="img1" id="img11" value="1" type="radio">...<input name="img1" id="img12" value="2" type="radio">

Et bien sûr juste avant la fermeture de la balise body j'ai ma div (dans laquelle se chargera l'image) :

<div id="textDiv"></div>

Merci de m'aider car là je m'arrache les cheveaux !!!
Modifié par roule007 (21 Mar 2008 - 10:30)

Je veux pas me la jouer liloo dans le 5ème élément mais PLEASE HELP...

C'est innerHTML, le problème... Créé pour IE mais pas pour le DOM :
http://www.journaldunet.com/developpeur/tutoriel/dht/050524-javascript-innerhtml-equivalent-dom-getelementbyid-replacedata.shtml

Bonnes modifs

Hello suite à votre réponse j'ai essyé de modifier ma function ma ça ne marche plus sous rien...
J'ai du faire une boulette, voilà ma nouvelle fonction :

<script type="text/javascript"><!--
function afficheImg(f)
{
longueurCible = document.getElementById("textDiv").firstChild.length;
if(f.elements["img1"][0].checked == true)
{
document.getElementById("textDiv").firstChild.replaceData(0, longueurCible, '<img src=" http://img.....&var1='+f.elements["var1"].value+'&var2='+f.elements["var2"].value+'&var3=val3" width="0" height="0">');
}
else document.getElementById("textDiv").firstChild.replaceData(0, longueurCible, '');
return true;
}
//-->
</script>

Personne pour m'aider ??

Ah OK, je vois... Tu n'a lu que la première partie de l'exemple, alors que ton cas ressemble plus à la deuxième partie (mais pas tout à fait )

Dans ce lien, il est expliqué que innerHTML peut être remplacé par l'utilisation du langage objet, qui est beaucoup plus rigoureuse :
1) On crée un objet "texte" et on lui donne un nom ("texte") :

texte = document.createTextNode("hello world");

2) On crée une balise HTML <p> et on lui donne un nom ("cible")

cible=document.createElement("p");

3) On ajoute le texte "Hello World" dans la balise <p></p> :

cible.appendChild(texte);

4) On place le tout dans le document !!!

document.body.appendChild(cible);

Il te faut procéder à peut près de la même façon, sauf que dans ton cas, tu devras :
1) créer la balise image
2) créer les attributs "src", "width" et "height" (avec leurs valeurs)
3) les introduire dans la balise <img>
4) placer le tout dans le document

...et ce, avec les outils que tu trouveras ici :
http://developer.mozilla.org/fr/docs/Cat%C3%A9gorie:R%C3%A9f%C3%A9rence_du_DOM_Gecko

dont je te conseille de zyeuter la page createAttribute :
http://developer.mozilla.org/fr/docs/DOM:document.createAttribute

Je sais, c'est pas simple...
Modifié par Gill (20 Mar 2008 - 21:02)

J'ai trouvé une autre solution avec détection du DOM ou non en fonction des navigateurs.

Merci pb résolu !