[Js] soucis avec document.getElementById Résolu/Fermé

Question

Bonjour,

Je vous expose mon soucis, j'ai codé un calendrier qui crée un lien pour chaque jour du mois. Ce lien à donc un id de la forme jourmoisannée et un onclick qui renvoie sur la fonction ci-dessous:

function colorer_calendrier(id_cal) {

document.getElementById(id_cal).className=('cliqué');

if (id_cal!=elem){ // Si l'ancien id est différent de l'actuel, alors on "décolore" le lien
document.getElementById(elem).className=('noncliqué');
}
var elem= id_cal; // Variable qui contient l'ancien id
}

Le but de l'opération est de colorer le lien en changeant sa classe Css lorsqu'on clique dessus (cette partie la fonctionne parfaitement) mais également de remettre la classe de base aux autres liens pour avoir l'impression d'avoir un seul lien "sélectionné".

Mon problème est qu'il n'y à aucune "remise à zéro" et tous les liens cliqués restent avec leur classe "cliqué".

Je ne sait pas si j'ai été assez clair dans mes explications, si tel n'est pas le cas n'hésitez pas à me poser des questions :)

Je met ici la ligne dans le calendrier qui génère le lien avec en gras les passages qui concernent le problème:

<td>
<a href="javascript:void(0)" id="<?php echo ("$j$mois_select$annee");?>" onclick="open_url('menu.php?jour_resa=<?php echo $j; ?>&mois_resa=<?php echo $nummois; ?>&annee_resa=<?php echo $annee; ?>', 'reservation.php?jour_resa=<?php echo $j; ?>&mois_resa=<?php echo $nummois; ?>&annee_resa=<?php echo $annee; ?>'); colorer_calendrier('<?php echo ("$j$mois_select$annee");?>');"><?php echo $j; ?></a></td>

Merci par avance de l'attention que vous porterez à ce post :)

Jérémy B

xav3601 · Answer

Salut!

Alors ce que je te propose c'est de mettre la classe de tous tes liens avec la classe "non_cliqué":

loLien = document.getElementsByTagName("a")
for(i=0; i<loLien.length;i++){
loLien[i].className=('non_cliqué'); 
}

Et après tu met ta fonction pour mettre la classe "cliqué" sur le lien souhaité!

a+

funkyou · Answer

Merci pour ta réponse rapide xav3601 !

Il me reste cependant un petit soucis, en effet le bout de code que tu m'a donné à pour effet de passer tous les liens de la page en mode "non_cliqué" c'est presque ce qu'il me faut, en effet ce que je n'ai pas expliqué c'est que j'ai 2 catégories de liens, j'explique dans le contexte:


L'utilisateur à le choix entre 3 services représentés par trois liens d'une div et ensuite à le choix d'une date dans le calendrier (tout sa généré par du Ajax donc dans une seule et même page). Mon objectif serais de colorer en même temps le service qu'il à choisi et la date du calendrier qu'il à choisi afin d'avoir un suivi visuel.

et la sa ce complique ^^

Dans tous les cas merci de ta première réponse tu m'a déjà aidé à faire un grand pas en avant !

Jérémy B.

funkyou · Answer

Voila c'est sa:

Une première série de lien -> le lien selectionné aura la class "cliqué"

et une autre série de liens (cases du calendrier) -> Au clic class "cliqué" également pour qu'ils aient la même couleur.


Pour des raisons pratique, j'ai réglé la coloration en deux fonctions distinctes:

une pour la première série de lien et l'autre pour les liens du calendrier. J'ai placé ton code dans ma seconde fonction mais le soucis est qu'elle remet "à 0" les liens de ma première série également. ^^

Beaucoup de travail pour un peu d'accessibilité... c'est la dure loi du webmastering :p

Jérémy B

funkyou · Answer

Problème résolu !

J'explique ma démarche sa pourra toujours servir à d'autres :)

Tout simplement lors de la déclaration de la variable qui sert à remettre mes liens "à 0":

	var loLien = document.getElementsByTagName('a');

J'ai remplacé cette ligne par

	var loLien = document.getElementsByName("lien_cal");

en appliquant un name sur mes liens venant du calendrier, par conséquent, la fonction n'agit que sur mes liens du calendrier en laissant intact ceux de ma div juste au dessus.


Merci à toi Xav3601 pour le temps que tu à consacré à mon problème.

A+ et une très bonne journée !

Jérémy B

[Js] soucis avec document.getElementById

4 réponses

Discussions similaires