Aide sur un code pour un site

**PoppyGuy** · 07/07/2016, 19h51

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 :

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
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>

**Auteur** · 07/07/2016, 22h56

Bonsoir,

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

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 :

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

/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

Invité · 08/07/2016, 10h49

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 :

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

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 :

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

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

1b/ dans le JavaScript, simplement :

Code javascript :

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

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 javascript :

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

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 javascript :

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
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 html :

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

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/

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 :

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

		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).

**PoppyGuy** · 13/07/2016, 21h21

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 :
Nom : Filezilla.JPG
Affichages : 135
Taille : 87,9 Ko

Nom : Filezilla.JPG
Affichages : 135
Taille : 87,9 Ko

(dans les répertoires Janvier, il y a Pressions.html et Pressions.jpg

Voici le code de la page index.html

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
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 :

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

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/

Invité · 14/07/2016, 00h54

Bonjour,

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

**PoppyGuy** · 14/07/2016, 08h51

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

Code :

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

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
}

Aide sur un code pour un site

JavaScript

Vue hybride

Discussions similaires

Partager

Partager