Discussion :

[spip93]

Bonjour à tous et à toutes,

Pour afficher, en fonction du jour qu'on est si telle médiathèque est ouverte ou non, j'ai un client qui a récupéré et mis à sa sauce le script Javascript suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
function messagevariable() {
    var jour = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
    var day = new Date().getDay();
    if(day==1){
        return jour[day]+"<br><font size='4', color='blue'>François Mitterrand : 13h - 19h <br> Centre et Jean-Jaurès : fermée </font>" ;
    }
 
	else if (day==2){
        return jour[day]+"<br><font size='4', color='blue'>François Mitterrand : 10h - 18h <br> Centre et Jean-Jaurès : 14h - 18h </font>" ;
    }
 
	else if (day==3){
        return jour[day]+"<br><font size='4', color='blue'>François Mitterrand : fermée <br> Centre et Jean-Jaurès : 10h - 12h30 / 14h - 18h </font>" ;
    }
 
	else if (day==4){
        return jour[day]+"<br><font size='4', color='blue'>François Mitterrand : fermée <br> Centre et Jean-Jaurès : 14h - 18h </font>" ;
    }
 
	else if (day==5){
        return jour[day]+"<br><font size='4', color='blue'>François Mitterrand : 10h - 19h <br> Centre et Jean-Jaurès : 14h - 18h </font>" ;
    }
 
	else if (day==6){
        return jour[day]+"<br><font size='4', color='blue'>François Mitterrand : 10h - 18h <br> Centre et Jean-Jaurès : 10h - 12h30 / 14h - 18h </font>" ;
    }
 
	else{
        return jour[day]+"<br><font size='4', color='blue'>Les Trois médiathèques sont fermées</font>" +jour[day];
    }
}

Je voudrais l'améliorer, l'intégrer à une page HTML et (surtout) le mettre en forme.

J'ai commencé par virer var jour = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi']; et jour[day]+ car je n'ai pas besoin d'afficher quel jour on est.
Ensuite, je me suis attaqué au dimanche car toutes les médiathèques sont fermées.
J'ai donc modifié le else par ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
else{
        return "<div class="col-md-12">
        <div class="nom_mediatheque">Médiathèque François Mitterrand</div>
        <div class="fermee">Fermée</div>
    </div>
    <div class="col-md-12">
        <div class="nom_mediatheque">Médiathèque Jean Jaurès</div>
        <div class="fermee">Fermée</div>
    </div>
    <div class="col-md-12">
        <div class="nom_mediatheque">Médiathèque du centre</div>
        <div class="fermee">Fermée</div>
    </div>";
    }

Cependant, mon éditeur de texte Visual Studio Code semble ne pas aimer les guillemets autour de mes noms de classe.
J'ai donc remplacé mes guillemets par des simples côtes mais j'ai (encore) des erreurs de partout.

Qu'est-ce que je dois mettre/remplacer pour :

1. Intégrer du HTML dans du Javascript et ne plus avoir d'erreurs
2. Que ça fonctionne

Je vous remercie par avance pour votre aide.

Bonne journée

[SpaceFrog]

tu as simplement un problème de quotes ...

avec une hiérarchie de simple et double quotes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return '<div class="col-md-12">   ..... '

ou en échappant les doubles quotes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return "<div class=\"col-md-12\">  ..."

[spip93]

Ayé, j'ai trouvé !
Il fallait :
- remplacer return" par return'
- (à la fin de chaque condition) remplacer " ; par ' ;
- pas remplacer les guillemets dans le code HTML par des simples côtes
- remplacer chaque > par \>
- (surtout) tout mettre sur la même ligne

Ce qui donne (pour le lundi ou day 1) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(day==1){
        return'<div class="col-md-12"\><div class="nom_mediatheque"\>Médiathèque François Mitterrand</div\><div class="fermee"\>Ouverte</div\><div class="horaires_ouverture"\>De 13h à 19h</div\></div\><div class="col-md-12"\><div class="nom_mediatheque"\>Médiathèque Jean Jaurès</div\><div class="fermee"\>Fermée</div\></div\><div class="col-md-12"\><div class="nom_mediatheque"\>Médiathèque du centre</div\><div class="fermee"\>Fermée</div\></div\>' ;
    }

[spip93]

Oups, Spacefrog, je viens de voir ta réponse.

[NoSmoking]

Bonjour,
on peut également utiliser l'accent grave des « Template literals », cela rajoute un niveau de quotte et prend simplement en compte les retours lignes.