Aller au contenu

Balise Spoil - Changement de couleur du texte


Sujets conseillés

Posté

Bonjour,

Voici mon petit souci... J'ai voulu intégré la balise SPOIL à mon système de forum, rien de bien méchant me direz-vous mais là où je bloque, c'est dans le javascript qui va permettre d'afficher le texte du spoil.

Par défaut, le texte est blanc sur fond blanc, le javascript est censé modifier la couleur du texte en noir. Ca marche mais il change la couleur du texte une seconde puis revient au blanc...

Voici comment je m'y prends:

  1. Le membre insère la balise BBCODE Spoil
  2. PHP traduit cela en Xhtml:
    <div id="spoil" class="spoil" onclick="spoil();" style="color: white;">blabla</div>

    Pour info, la balise SPOIL a un fond blanc.

  3. Comme vous pouvez le voir, la fonction spoil() s'active lorsque le membre clique dessus, celle-ci est censée changer la couleur du texte en noir. Voici le code:
    function spoil() {
    var idspoil = document.getElementById('spoil');
    if (idspoil.style.color == 'white') {
    idspoil.style.color='black';
    }
    }


  4. Lorsque je clique, il m'affiche le texte une seconde et revient au blanc...

Je débute en javascript (il est pourtant facile à prendre en main... très ressemblant au php) donc je ne vois pas ce qui cloche.

Merci d'avance,

Luan.

Posté

Hello,

Possible d'avoir une url de page ? Ton problème ne vient certainement pas de ta fonction.

Posté (modifié)

Bonjour,

Merci d'avoir pris le temps de me répondre. Ca risque d'être dur de donner une url car cette partie là n'est pas en ligne. Cependant, après quelques tests, je viens de me rendre compte que le souci n'apparaît que quand je fais un aperçu du message via javascript.

Je m'explique, lors de la création d'un sujet sur le forum, on peut faire un aperçu du message qui sera généré en js sans recharger la page. J'ai essayé d'insérer le bbcode via phpmyadmin et là, ça marche (c'est php qui gère le remplacement des donées). Le problème vient donc du javascript qui gère le remplacement du bbcode en html.

Voici la partie du code javascript qui remplace la balise spoil:

textebbcode=remplace_tag(/\[spoil\](.+)\[\/spoil\]/g,'<span class="spoill">Spoil:</span><div id="spoil" style="color: white;" class="spoil" onclick="spoil();">$1</div>',textebbcode)   

Le souci, c'est que cette fonction, je l'ai réalisée avec de l'aide donc ça dépasse mes compétences. Ce que je suppose: les deux fonctions s'entrechoquent à savoir que spoil() veut mettre du noir et l'autre du blanc, alors dès que j'ai fait mon onclick="spoil();", la fonction bbcode(); reprend la relève... malheureusement, je ne vois pas comment régler le souci.

Merci de ton aide,

Luan.

Modifié par Luan
Posté

Tu as absolument besoin de l'aperçu du spoiler lors de la phase d'aperçu ? Ce n'est pas une fonction vitale.

Sinon, en regardant ton premier message, je me suis rendu compte que tu utilisais un ID pour la balise à cacher. J'imagine que tu peux avoir plusieurs balises spoil par page, or un ID est censé être unique. Tu devrais utiliser des class.

Pour finir, ta fonction ne cible pas une balise spoil en particulier. Ca va fonctionner avec une seule balise dans la page, mais dès que tu en auras plusieurs, un clic sur l'un des boutons t'affichera TOUTES les balises spoil de la page.

Posté

Bonjour,

La fonction d'aperçu du spoil n'est pas vitale, j'en conviens. Disons que j'aimerais éviter de devoir la faire plus tard quand le site grandira.

En effet, j'utilise des id car je ne sais pas le faire avec des class (mes recherches n'ont pas donné quelque chose de concluant...), quant au souci d'activation de toutes les balises spoil, je n'y ai même pas pensé (comme je l'ai dit, je débute en javascript.

Si dans ma fonction je mets un paramètre, et que quand je clique, il y ait "this" dans le paramètre d'appel de la fonction ? Ca résoudrait les deux problèmes ?

Merci d'avoir soulevé ce nouveau problème, j'aurais perdu du temps...

Luan.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...