Aide sur un code pour un site

Version imprimable

Bonjour,

J'essaye de créer un site, je souhaiterais avoir 3 liste déroulantes:
1) Choix de l'année
2) Choix du mois
3) Choix de la pages

Dans mon PC sur F:/, j'ai le dossier du site qui s'appelle "Meteo_Clopiniere".
Dans ce dossier, j'ai créé un dossier "Annee" comprenant les dossiers 2010...2011.2012....etc
Dans le dossier "2010"...2011.... j'ai créé les dossiers janvier...Fevrier...Mars
Dans le dossier "Janvier", il y a les fichiers Temperatures.html...Humidite...vent.....etc

J'essaye depuis plusieurs jours à faire apparaître la page "Pressions.html" mais je n'y arrive pas.
Qu'ai-je pu mal faire :(
Si vous pouviez m'aider, ça m'arrangerais beaucoup ;)

Voici le lien du cite:
http://st-florent-meteo-clopiniere.akeonet.com/

Et voici le code:
Merci pour votre aide
Cordialement

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Listes Guy</title>
<meta content="Guy" name="author">
<script type="text/javascript">
<!--
function onChange()
{
var index_annee = document.getElementById('annee').selectedIndex;
var annee = document.getElementById('annee').options[index_annee].text;
 
var mois = document.getElementById('mois').options[document.getElementById('mois').selectedIndex].text;
 
var pages = document.getElementById('pages').options[document.getElementById('pages').selectedIndex].text;
 
var url = annee + '/' + mois + '/' + pages +'.html';
window.location=url;
}
//-->
</script>
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<div style="text-align: center;"><big><big>Météo La Clopinière</big></big><br>
</div>
<br>
<div style="text-align: center;"><!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="">Janvier</option>
<option value="">Fevrier</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Aout</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Decembre</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1" onchange="onChange();">
<option value="">Choisir une page</option>
<option value="">Temperatures</option>
<option value="">Humidite</option>
<option value="">Pressions</option>
<option value="">Vent</option>
<option value="">Ensoleillement</option>
</select>
</div>
<br>
<div style="text-align: center;"><img
style="width: 800px; height: 200px;" alt="Meules" src="Meules.JPG"><br>
</div>
<br>
<div style="text-align: center;">Températures<br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 564px;" alt="GraphiqueT°"
src="Temperatures.jpg"><br>
</div>
<br>
<div style="text-align: center;">Ensoleillement<br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 562px;" alt="Graphique Soleil"
src="Ensoleillement.jpg">
</div>
</body>
</html>

07/07/2016, 22h56
Auteur

Bonsoir,

ce sont toutes les pages que l'on ne peut pas charger. Et l'erreur est explicite :

Citation:

The requested URL / was not found on this server.

il y a un problème de chemin.

Il y a aussi un petit problème de conception des listes puisque je peux sélectionner une page de la forme :

Code:

/Choisir une Année/Choisir un mois/Couleur_du_ciel.html

Donc ultérieurement il faudra vérifier les éléments choisis pour éviter ce genre d'url ;)

Bonjour,

plusieurs choses à (re)dire sur le code.

1/ Généralement, on récupère la value de l'option, pas le texte.

1a/ Donc, il faut remplir les value des options (car ces value peuvent être DIFFERENTES* du texte) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <select id="annee" name="annee" size="1"> <option value="">Choisir une Année</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> ... </select> <select id="mois" name="mois" size="1"> <option value="">Choisir un mois</option> <option value="Janvier">Janvier</option> <option value="Fevrier">Fevrier</option> <option value="Mars">Mars</option> ...
* exemple :

Code:

<option value="Aout">Août</option>

1b/ dans le JavaScript, simplement :
Code:

1 2 3 4 5 var annee = document.getElementById('annee').value; var mois = document.getElementById('mois').value; var pages = document.getElementById('pages').value;
2/ Comme on a laissé la value vide (value="") pour l'option "par défaut", on peut vérifier si l'année, le mois... ont bien tous été renseignés :
Code:

1 2 3 4 5 6 7 if( annee != '' && mois != '' && pages != '' ) { var url = annee + '/' + mois + '/' + pages +'.html'; window.location=url; } else { alert('Remplissez toutes les options'); }
Ce qui donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function onChange() { var annee = document.getElementById('annee').value; var mois = document.getElementById('mois').value; var pages = document.getElementById('pages').value; if( annee != '' && mois != '' && pages != '' ) { var url = annee + '/' + mois + '/' + pages +'.html'; alert(url); // TEST window.location=url; } else { // TEST alert('Remplissez toutes les options'); // TEST } }
3/ De plus, le onchange peut être appliqué aux 3 select :
Code:

1 2 3 4 5 6 <select id="annee" name="annee" size="1" onchange="onChange();"> ... <select id="mois" name="mois" size="1" onchange="onChange();"> ... <select id="pages" name="pages" size="1" onchange="onChange();"> ...
4/ ATTENTION à la casse (majuscule/minuscules) dans les noms des DOSSIERS et FICHIERS.
ex. : "Janvier" et "janvier" sont différents...

5/

Citation:

Envoyé par PoppyGuy

...Dans mon PC sur F:/, j'ai le dossier du site qui s'appelle "Meteo_Clopiniere"...

Donc :
5a/ il manque "Meteo_Clopiniere/" dans l'URL !

Code:

var url = 'Meteo_Clopiniere/'+annee + '/' + mois + '/' + pages +'.html';

5b/ C'est bien que ce soit sur ton PC.
C'est mieux si c'est sur le SERVEUR du site ! (car, à priori, ce n'est pas ton PC qui sert de serveur).
-> il faut donc télécharger TOUT le dossier "Meteo_Clopiniere" sur le serveur (distant).

2 pièce(s) jointe(s)

Aide sur un code pour un site

Bonsoir,
Excuse du retard, j'essaye de voir ça que je peux faire.
Cordialement

PS:
Je viens de faire un essai, ça ne fonctionne pas, mais j'ai du certainement pas fais ce qu'il fallait ??

Voici plus de détails :

Mes fichiers sur Filezilla :
Pièce jointe 215399 (dans les répertoires Janvier, il y a Pressions.html et Pressions.jpg

Voici le code de la page index.html

Code:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Index</title>
<meta content="Guy" name="author">
<script type="text/javascript">
<!--
function onChange()
{
 
var annee = document.getElementById('annee').value;
 
var mois = document.getElementById('mois').value
 
var pages = document.getElementById('pages').value
 
if( annee != '' && mois != '' && pages != '' )
{
var url = 'Meteo_Clopiniere/'+ annee + '/' + mois + '/' + pages +'.html';
alert(url); // TEST
window.location=url;
} else { // TEST
alert('Remplissez toutes les options'); // TEST
}
}
<select id="annee" name="annee" size="1" onchange="onChange();">
...
<select id="mois" name="mois" size="1" onchange="onChange();">
...
<select id="pages" name="pages" size="1" onchange="onChange();">
...
//-->
</script>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<div style="text-align: center;"><big style="color: white;"><big>Météo
La Clopinière</big></big><br>
</div>
<br>
<div style="text-align: center;"><!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="Janvier">Janvier</option>
<option value="Fevrier">Fevrier</option>
<option value="Mars">Mars</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1">
<option value="">Choisir une page</option>
<option value="">Ciel</option>
<option value="Graphiques">Graphiques</option>
<option value="Pressions">Pressions</option>
<option value="Vent">Vent</option>
<option value="Recaps">Recaps</option>
</select>
</div>
<br>
<div style="text-align: center;"><img
style="width: 800px; height: 200px;" alt="Meules" src="Meules.JPG">
</div>
<br>
<div style="text-align: center;"><span style="color: white;">Températures</span>
</div>
<div style="text-align: center; background-color: rgb(99, 5, 39);"><img
style="width: 900px; height: 564px;" alt="GraphiqueT°"
src="Temperatures.jpg"><br>
</div>
<br>
<div style="text-align: center;"><span style="color: white;">Ensoleillement</span><br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 562px;" alt="Graphique Soleil"
src="Ensoleillement.jpg">
</div>
</body>
</html>

Voici le code de la page Pressions.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Pressions</title>
</head>
<body style="background-color: rgb(99, 5, 39); color: rgb(0, 0, 0);"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;">&nbsp;
<img style="width: 644px; height: 1528px;" alt="hpa" src="Pressions.jpg"><br>
</div>
<br>
</body>
</html>

Et l'adresse du site :
http://st-florent-meteo-clopiniere.akeonet.com/

14/07/2016, 00h54
Invité

Bonjour,

L'URL correcte (= à obtenir !) est : http:// st-florent-meteo-clopiniere.akeonet.com/2011/Janvier/Pressions.html

Bonjour,
J'ai mis ça, mais ce ne doit pas encore être bon ?

Code:

1
2
3
4
5
6
7
{
var url = 'Meteo_Clopiniere/'+ annee + '/' + mois + '/' + pages +'.html';
alert(url); htp:// st-florent-meteo-clopiniere.akeonet.com
window.location=url;
} else { htp:// st-florent-meteo-clopiniere.akeonet.com
alert('Remplissez toutes les options'); htp:// st-florent-meteo-clopiniere.akeonet.com
}

14/07/2016, 08h59
Invité
Bonjour,

à priori, il suffit de :
Code:

1 2 3 4 5 { var url = '/'+ annee + '/' + mois + '/' + pages +'.html'; alert(url); window.location=url; }
N.B. il n'existe pas de dossier "Meteo_Clopiniere" sur le serveur (appelé "Site Distant" dans Filefilla)

OU essaie avec :

Code:

var url = './'+ annee + '/' + mois + '/' + pages +'.html';

'./' indique le dossier en cours (ici, la "racine" du site)

Bon.
Je viens de regarder ta page en ligne...
Il ne faut pas "recopier" sans comprendre non plus... :roll:

Le script COMPLET est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function affichePage()
{
  // récupération des données : annee / mois / pages
  var annee = document.getElementById('annee').value;
  var mois = document.getElementById('mois').value
  var pages = document.getElementById('pages').value
 
  if( annee != '' && mois != '' && pages != '' )
  {
     var url = '/'+ annee + '/' + mois + '/' + pages +'.html';
     document.location.href = url; // on affiche la page
  }
}
</script>

Et le HTML :

Code:

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
<div style="text-align: center;">
<!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1" onchange="affichePage();">
	<option value="">Choisir une Année</option>
	<option value="2011">2011</option>
	<option value="2010">2010</option>
	<option value="2009">2009</option>
	<option value="2008">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1" onchange="affichePage();">
	<option value="">Choisir un mois</option>
	<option value="Janvier">Janvier</option>
	<option value="Fevrier">Fevrier</option>
	<option value="Mars">Mars</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1" onchange="affichePage();">
	<option value="">Choisir une page</option>
	<option value="">Ciel</option>
	<option value="Graphiques">Graphiques</option>
	<option value="Pressions">Pressions</option>
	<option value="Vent">Vent</option>
	<option value="Recaps">Recaps</option>
</select>
</div>

Là, tu peux faire un copier-coller ;)

19/07/2016, 09h03
PoppyGuy

Bonjour,
Je suis parti quelques jours, je rentre demain, je regarde ça et je te tiens au courant.
En attendant, je te remercie
Cordialement

Bonjour,
J'ai fais mes essais, ça fonctionne.

Citation:

Il ne faut pas "recopier" sans comprendre non plus...

Je suis d'accords, mais comme je ne connais rien, il me fallait un modèle pour comprendre et pour pouvoir modifier par la suite et comparer.
Merci de ton aide
Cordialement