Modifier le contenu HTML via un script

**nunuche** · 27/02/2010, 01h52

Bonjour,

Je poste parce que j'ai eu beau triturer mon script dans tous les sens, mes fonctions ne veulent pas marcher.

Alors voilà. Je souhaite concevoir un petit site internet dans lequel le contenu du bloc central sera remis à jour en fonction du lien qui sera cliqué dans les diverses rubriques.

J'ai donc découpé ma page d'index en plusieurs blocs, créer quelques liens pour voir si ça marche et générer un fichier javascript, avec quelques fonctions, que j'ai mis dans le dossier script. Mais ça ne marche pas. Je n'arrive pas à déterminer si c'est l'implémentation du fichier javascript dans la page html qui cafouille ou si c'est que j'ai mal écrit mes fonctions. Ci-après mes fichiers html et javascript:

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Le monde du libre</title>
<link href="script/script.js" rel="script" type="text/js">
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id: "en_tete">Le monde du libre</div>
<div class:"rubrique">
<a href="javascript:;" onclick="firefox();">Firefox</a><br/>
<a href="javascript:;" onclick="seamonkey();">Seamonkey</a>
</div>
<div id:"bloccentral"></div>
<div id:"pied_de_page">
Code et design par Captive Angel.<br/>
Derni&egrave;re mise &aacute; jour le 26 f&eacute;vrier 2010.
</div>
</body>
</html>

Javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language=JavaScript>
 
function firefox()
	{
	window.document.div["bloccentral"].write("Firefox");
	}
function seamonkey()
	{
	window.document.div["bloccentral"].write("Seamonkey");
	}
 
</script>

Je vous serais gré de bien vouloir éclairer ma lanterne.

D'avance merci.

**Bovino** · 27/02/2010, 10h21

Code :

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

<link href="script/script.js" rel="script" type="text/js">

Code :

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

<script src="script/script.js" type="text/javascript"></script>

**Auteur** · 27/02/2010, 10h30

bonjour,

Code html :

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

1
2
3
 
<div id: "en_tete">Le monde du libre</div>
<div class:"rubrique">

Code html :

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

1
2
3
 
<div id:"bloccentral"></div>
<div id:"pied_de_page">

Les réflexes d'un autre langage ?

Code html :

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

1
2
3
<div id="en_tete">Le monde du libre</div>
<div class="rubrique">

Code html :

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

1
2
3
<div id="bloccentral"></div>
<div id="pied_de_page">

**nunuche** · 27/02/2010, 19h53

Merci pour vos réponses.

J'ai effectué les corrections, mais ça ne marche toujours pas.

Pour rappel:

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Le monde du libre</title>
<script src="script/script.js" type="text/javascript"></script>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="en_tete">Le monde du libre</div>
<div class="rubrique">
<a href="javascript:;" onclick="firefox();">Firefox</a><br/>
<a href="javascript:;" onclick="seamonkey();">Seamonkey</a>
</div>
<div id="bloccentral"></div>
<div id="pied_de_page">
Code et design par Captive Angel.<br/>
Derni&egrave;re mise &aacute; jour le 26 f&eacute;vrier 2010.
</div>
</body>
</html>

javavascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language=JavaScript>
 
function firefox()
	{
	window.document.div["bloccentral"].write("Firefox");
	}
function seamonkey()
	{
	window.document.div["bloccentral"].write("Seamonkey");
	}
 
</script>

Une autre suggestion?

**Auteur** · 28/02/2010, 11h24

Déjà si ton code javascript se trouve dans un fichier .js supprime les balises <script>

Ensuite

Code :

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

window.document.div["bloccentral"].write("Firefox");

bizarre comme syntaxe

Code :

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

1
2
 
document.getElementById("bloccentral").innerHTML = "coucou";

**nunuche** · 28/02/2010, 16h48

Alors, on va reprendre depuis le début.

Voici comment j'avais implémenté mon script js au début:

Code :

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

<link href="script/script.js" rel="script" type="text/js">

Sur conseil de Bovino (voir plus haut), je l'ai modifié en ceci:

Code :

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

<script src="script/script.js" type="text/javascript"></script>

Maintenant tu me dit, sans donner plus de précision, que ce n'est pas ça.

Alors c'est quoi la bonne syntaxe, b...!

Code :

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

window.document.div["bloccentral"].write("Firefox");

bizarre comme syntaxe

De plus, j'ai déjà essayé la méthode que tu suggère sans plus de succès.
Ce qui me semble logique puisque get permet de récupérer un élément dans l'ID désignée. Or je ne veux pas le récupérer un élément, je veux écrire quelque chose dans cette ID.

Autre chose?

**Auteur** · 28/02/2010, 17h53

Envoyé par nunuche

Alors, on va reprendre depuis le début.

Voici comment j'avais implémenté mon script js au début:

Code :

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

<link href="script/script.js" rel="script" type="text/js">

Sur conseil de Bovino (voir plus haut), je l'ai modifié en ceci:

Code :

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

<script src="script/script.js" type="text/javascript"></script>

je me suis mal exprimé désolé

La syntaxe de Bovino est juste

Moi je parlais du fichier javascript qui est appelé par les balises script, celui qui contient ton code javascript :
script/script.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language=JavaScript>
 
function firefox()
	{
	window.document.div["bloccentral"].write("Firefox");
	}
function seamonkey()
	{
	window.document.div["bloccentral"].write("Seamonkey");
	}
 
</script>

les balises script sont à supprimer.
Regarde bien il s'agit de la méthode write de l'objet document :

Code :

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

document.write("coucou");

En aucun cas la méthode write ne peut s'appliquer à un autre objet que document. En passant, j'en profite pour te conseiller d'oublier cette méthode write()

Envoyé par nunuche

Ce qui me semble logique puisque get permet de récupérer un élément dans l'ID désignée. Or je ne veux pas le récupérer un élément, je veux écrire quelque chose dans cette ID.

La méthode document.getElementById("idElement") te permet d'accéder à un élément contenu dans ta page HTML. Une fois que tu pointes cet objet tu peux faire ce que tu veux.

**nunuche** · 28/02/2010, 21h45

je me suis mal exprimé désolé

Pas de problème. C'est là qu'on voit l'intérêt de bien préciser quel fichier il faut éditer.

Sinon, j'ai supprimé les balises script et modifier mes fonctions write(). Ça marche un peu mieux, merci. Ce qui m'amène au point suivant.

En passant, j'en profite pour te conseiller d'oublier cette méthode write()

Je suis d'accord. Ce site ayant pour vocation de grossir rapidement, je vais, avec ma méthode, surcharger très vite mon fichier javascript.

Dans l'idéal, il faudrait créer une page html pour chacun des logiciels que j'ai l'intention de présenter. Ça veut dire aussi qu'il va falloir charger une page html dans une autre page html par le biais d'une fonction javascript.

Le problème c'est que je n'ai, à mon grand regret, pas eu la possibilité de suivre une formation très poussée en informatique et que si je maîtrise assez bien html et css, il n'en va pas de même pour javascript. C'est pour cette raison que j'avais opté pour la fonction write().

Je suis d'accord pour suivre ta solution mais il va falloir m'aider et t'armer de patience car je suis un débutant complet sur javascript.

Comment ça marche exactement l'implantation d'une html dans une autre html avec javascript?

Modifier le contenu HTML via un script

JavaScript

Discussions similaires

Partager

Partager