Bonjour tous le monde,

Je souhaites qu'en appuyant sur un bouton un second bouton apparaissent dans une autre div et quand j'appuie sur ce nouveau bouton une image apparait dans une 3éme div.
Voila mon code:



Don en résumé quand je click sur mon premier bouton le deuxième s'affiche bien mais lorsque je click sur ce second bouton le 3eme à savoir l'image elle ne s'affiche pas ... Je pense que cela pourrais provenir des quotes et double quote.
Si quelqu'un connais la solution à mon problème ou à simplement des idées ce serais sympa merci.
Bonne soirée

Bonjour.

Je te conseille d'utiliser un outil de débuggage, histoire de voir html généré par ton JS.

Tel que tu donnes ton code, je ne comprends pas comment ça se fait qu'il fonctionne chez toi.
Chez moi la page plante dès le chargement :

Erreur : missing ; before statement
Code source :
var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1('"<img src=\"g8.jpg\" width=\"481\" height=\"421\" />"')\">Revue n°1</a></br>";

Sinon, je te conseillerais d'y aller par étape. C'est un peu plus fastidieux, mais au moins ça évite les erreurs liées aux quote/guillemets...
Du genre, la fonction fonction1() prend comme argument le nom de l'image, et tu construit le lien vers l'image dans cette fonction. Tu peux même passer aussi l'ID du DIV à modifier en argument.

Entre autres intérêts, ça te permet de réutiliser ta fonction1() (au passage, change son nom pour quelque chose de plus parlant, tu seras content quand tu devras retoucher à ton code dans 2 ans )

Et bien a vrai dire le code que j'ai affiché et notamment la ligne que tu as indiqué c'est justement la que se trouve l'erreur.
Si je met un simple texte par exemple fonction1('Mon texte') cela fonctionne.

Il n'y a qu'en remplaçant le "Mon texte" par le lien de l'image que cela ne fonctionne pas.


Que me conseille tu comme outil de debug?

Pour débugger, ça dépend de l'usage que tu vas en avoir.

Un simple Firebug/Web developer (extensions pour Firefox) devrait déjà bien t'aider (entre autres, WebDeveloper te permet d'avoir la source d'une page après effet du JS).

En fait j'ai déjà Firebug mais hélas cela ne m'aide pas à résoudre mon problème ...

Travaille avec logique.

Dans ta ligne de code, tu as trois niveaux : du JavaScript dans du HTML dans du JavaScript : pars du plus profond en écrivant le bout de code normalement : insère-le ensuite dans le niveau supérieur en échappant les quotes appropriées. Et continues ensuite en insérant le tout dans le niveau supérieur et en effectuant la même opération d'échappement. C'est un peu casse-tête vu comme ça, mais c'est mathématique.

ok je vais essayé ca

Bon voila il semblerait que j'ai avancé dans mon problème hélas d'autres sont arrivés et avec des questions ...

Voila le code qui fonctionne sur firefox :

<script type="text/javascript"><!--
 function categorie1() 
   {
var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<a href='#'><img src='Decoupage/revues/revue1.png'/></a>)\">Revue n°1</a></br>";
	
	 if (document.getElementById("cat0"))
     {
     document.getElementById("liste" ).innerHTML  =  maliste;
     }
   }

   
   
   
   function fonction1(toThis) 
   {
	 if (document.getElementById("revue0"))
     {
     document.getElementById("textDiv" ).innerHTML  =  toThis;
     }

   else if (document.all) 
     {
     document.getElementById("textDiv" ).innerHTML  = "erreur";
     }
   }

                                   <div class="categorie">
                                         <a class="cat" id="cat0" href="#" onclick="categorie1()">Revue n°1 à n°10</a></br>
                                  </div>
                                  <div class="revue" id="liste"></div>
                                  <div id="textDiv"></div>

Premier problème c'est que ce code ne fonctionne QUE SOUS firefox toutes versions confondus.
Donc ma premiere question serais qu'est ce qui cloche avec chrome opera et bien sur le maitre IE ....

Deuxième question je ne comprend pas pourquoi sous firefox cette ligne de code fonctionne

var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<a href='#'><img src='Decoupage/revues/revue1.png'/></a>)\">Revue n°1</a></br>";

Alors que cette ligne ne fonctionne pas :

var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<img src='Decoupage/revues/revue1.png'/>)\">Revue n°1</a></br>";

Corrigé moi si je me trompe mais l'image sans le lien devrait fonctionné aussi non?
Si vous pouvez me donné un coup de main ce serais vraiment sympa j'en deviens chauve

Non, ça ne fonctionne sous Firefox que par surprise à mon avis parce que ça ne devrait pas fonctionner plus que sur les autres.

Je t'ai suggéré d'avancer avec logique en partant du plus profond des imbrications de code jusqu'à l'extérieur. Montre-moi donc les trois étapes, code original et comment tu l'insères dans le niveau au dessus. N'oublie pas que chaque niveau de code doit être valide pour fonctionner. Et un autre indice : comme il y a imbrication multiple, il ne serait pas surprenant de devoir échapper certains échappements.

Donc si je comprend bien ce que tu veux que je fasse ca donnerais ca?

Etape 1:

je veux afficher une certaine image:

<div id="col3">
<img src="revue1.png"/>
</div>

Etape deux je veux que cette image sois afficher en fonction d'un bouton choisis:

<div id="col3">

</div>

<div id="col2">
<a id="btn0" href="#" onclick="afficheimage(<img src=\"revue1.png\"/>)">Revue n°1</a>
</div>

function afficheimage() 
   {
	 if (document.getElementById("btn0"))
     {
     document.getElementById("col3" ).innerHTML  =  toThis;
     }
   }

Et déjà la ca bloque...... je pige pas du tout l'échappement a croire ...

Tu y es presque.

Première étape, on va simplifier, reprenons le bout de code à problème de départ :

var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<a href='#'><img src='Decoupage/revues/revue1.png'/></a>)\">Revue n°1</a></br>";

On a quoi une variable JavaScript qui vaut un bout de code HTML contenant lui-même un appel JavScript dans un gestionnaire d'évènement, lui-même contenant un paramètre qui est un bout de code HTML. Range les aspirines, on va dés-emboiter les poupées russes pour éclaircir tout ça.

Premier bout de code, le paramètre :

<a href="#"><img src="Decoupage/revues/revue1.png" alt=""/></a>

Comme on l'envoie en paramètre, JavaScript doit le traiter comme une chaine de caractères, passons donc à l'appel de la fonction :

fonction1();

C'est une chaine de caractère, donc le paramètre sera entre quotes simples :

fonction1('<a href="#"><img src="Decoupage/revues/revue1.png" alt=""/></a>');

La chaine HTML ne contenant elle-même pas de quotes simples, pas de conflit, tout va bien. Maintenant, cet appel de fonction est dans un gestionnaire d'évènement dans une balise HTML, ça se corse un peu :

<a class="rev" id="revue0" href="#" onclick="fonction1('<a href="#"><img src="Decoupage/revues/revue1.png" alt=""/></a>');">Revue n°1</a><br />

Là, on a un problème puisqu'on est en HTML et qu'il y a des guillemets dans la valeur de l'attribut onclick : on va les échapper :

<a class="rev" id="revue0" href="#" onclick="fonction1('<a href=\"#\"><img src=\"Decoupage/revues/revue1.png\" alt=\"\"/></a>');">Revue n°1</a><br />

On y arrive, dernière étape : tout ça doit former la valeur de ma variable JavaScript maliste : Comme on affecte une chaine à cette variable, on va l'encadrer de quotes simples : ça veut dire que toutes les quotes simples contenues dans cette chaine doivent impérativement être échappées, ce qui devrait donner ceci :

var maliste = '<a class="rev" id="revue0" href="#" onclick="fonction1(\'<a href=\"#\"><img src=\"Decoupage/revues/revue1.png\" alt=\"\"/></a>\');">Revue n°1</a><br />';

Essaye déjà comme ça et reviens avec le résultat, j'ai pas testé, mais tu devrais déjà avoir un résultat homogène avec tous les navigateurs.

Ok merci j'essaye ca et je te dit le résultat et j'aurais quelques questions si ca ne te dérange pas je ne suis pas certain d'avoir saisi tout ...

il semble qu'il y ai un problème.
');">Revue n°1


voila ce quil 'affiche comme lien pour le deuxième bouton et quand je passe sous firebug en mettant un point d'arrêt il ne passe pas dans la fonction 1


Edit:visiblement dans la dernière ligne écrite le var il y avais un point virgule je ne sais pas si il était volontaire mais je l'ai retirer.

Ok, comme je vois pas tous les éléments, je vais te suggérer une ré-écriture de ta fonction categorie1 de la manière suivante :

function categorie1()
{
    var img2 = '<a href="#"><img src="Decoupage/revues/revue1.png" alt="" /></a>';
    var maliste = '<a class="rev" id="revue0" href="#">Revue n°1</a><br />';
    if (document.getElementById("cat0")) 
    {
        document.getElementById("liste").innerHTML = maliste;
        document.getElementById('revue0').onclick = function()
        {
            fonction1(img2);
        };
    }
}

Qu'est-ce que j'ai modifié ?
d'abord j'ai viré le gestionnaire d'évènement onclick, ensuite j'ai mis le block à insérer de ce gestionnaire dans une variable. J'ai ensuite ajouté une autre forme de gestionnaire d'évènement après l'insertion de ce bout de code : l'idée, c'est qu'après l'insertion, ce bout de code est partie intégrante du DOM alors qu'avec le système de base, il était à parier que ça n,aurait pas fonctionné. Il devient donc accessible aux manipulations et ce coup ci ça devrait fonctionner correctement.

Hum quand je regarde le déroulement de l'opération sur firebug il passe bien dans chaque opération pourtant l'image ne s'affiche pas....étrange.