Discussion :

[SBF33]

Bonjour,

J'aimerai r�aliser sur mon site web un planning d'ouverture du magasin comme ceci :

Selon la date du jour il surligne la ligne correspondante, j'ai vu qu'on pouvais faire cela en JavaScript mais je n'y arrive pas.

Est-ce que quelqu'un pourrais m'aiguiller un peu pour r�aliser se script ?

Merci d'avance pour votre aide.

[Bovino]

Date.prototype.getDay().

Ceci dit, si ta page utilise un langage serveur (par exemple PHP), il est pr�f�rable de g�rer cela directement � la cr�ation de la page.
Si c'est une page statique HTML, alors JavaScript fera l'affaire.

[SBF33]

La page est bien statique.

Voila comment mon code HTML :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
<h3>horaires : </h3>
<ul>
	<li class="">Lundi : 8h00-19h00</li>
	<li class="">Mardi : 8h00-19h00</li>
	<li class="">Mercredi : 8h00-19h00</li>
	<li class="">Jeudi : 8h00-19h00</li>
	<li class=>Vendredi : 8h00-19h00</li>
	<li class="">Samedi : Fermé</li>
	<li class="">Dimanche : Fermé</li>
</ul>

La commande Date.prototype.getDay() va me renvoyer le jour de la semaine pour la date sp�cifi�e selon l'heure locale mais comment je fais ensuite pour surligner le jour dans mon <li> comme sur la photo ?

[Bovino]

Est-ce que quelqu'un pourrais m'aiguiller un peu

Pourquoi les discussions qui commencent par "je ne demande pas qu'on me le fasse, mais juste qu'on m'aiguille" finissent-elles toujours par "faites-le moi" ?

[SBF33]

C'est pas faux !

Je dit bien aussi je connais pas du tout Javascript donc �a coule un peu de source.

Par forcement me le faire mais juste m'expliquer un peu si possible car je ne vois pas du tout comment faire.

[Golgotha]

Pour une fois �a sera sans jQuery..

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
.today{    background-color : yellow;
}

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
<h3>horaires : </h3><ul>
    <li class="day">Lundi : 8h00-19h00</li>
    <li class="day">Mardi : 8h00-19h00</li>
    <li class="day">Mercredi : 8h00-19h00</li>
    <li class="day">Jeudi : 8h00-19h00</li>
    <li class="day">Vendredi : 8h00-19h00</li>
    <li class="day">Samedi : Fermé</li>
    <li class="day">Dimanche : Fermé</li>
</ul>

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
var d = new Date();var n = d.getDay();
 
 
var items = document.getElementsByClassName('day');
items[n-1].classList.add("today");

J'ai mis un classe "day" pour toutes les li, �a me permet de les s�lectionner en js avec document.getElementsByClassName('day');Ce qui me donne un tableau des li, il n'y � plus qu'a ajouter la classe "today" sur l'�l�ment qui nous int�resse c'est � dire le jour de la semaine qui est donn� avec getDay que Bovino avait d�j� mis en lumi�re.

[SBF33]

Merci beaucoup pour ta gentillesse Golgotha.

J'essaye d'appliquer tes explication et je reviens vers vous pour vous dire si j'ai r�ussi.

[SBF33]

Le code js, je l'int�gre dans ma page HTML ?

Si oui faut-il que je sp�cifie quelque chose en plus ?

[SBF33]

Dans ma page HTML j'ai rajout� le code suivant :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
<script>
  var d = new Date();var n = d.getDay();
  var items = document.getElementsByClassName('day');
  items[n-1].classList.add("today");
</script>

Et lorsque j'actualise la page �a ne surligne pas la date du jour.

Alors que si je fais manuellement en rempla�ant "day" par "today" �a fonctionne ce qui est normal.

Est-ce que j'ai fais une erreur ?

[SBF33]

Dans la console debug j'ai le message suivant :

Uncaught TypeError: Cannot read property 'classList' of undefinedlocalhost/:132 (anonymous function)

[Golgotha]

C'est juste un probl�me de timing :

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
document.addEventListener("DOMContentLoaded", function(event) {
 
var d = new Date();
var n = d.getDay();
 
var items = document.getElementsByClassName('day');
items[n-1].classList.add("today");
 
        });

[SBF33]

J'ai trouv� d'ou viens le probl�me.

Merci encore � toi Golgotha pour ton aide