javascript de la théorie à la pratique

**Alba.1337** · 16/03/2011, 23h10

Bonsoir à vous,
je suis étudiant et ai un TP à faire, je pensais avoir saisi la théorie du javascript, et là je me prends une grande claque, j'espère que vous saurez éclairer ma lanterne.

Il s'agit de modifier un fichier .xhtml à l'aide d'un fichier .js qui lui est joint.
Le fichier .xhtml est une liste de recettes. Le titre principal est déterminé grâce à <h1> et chaque recette par <h3>.
La question est alors de modifier le titre principal, en lui ajoutant le nombre de recettes contenues dans le fichier sous la forme : "titre (3)" (par exemple...).

J'ai donc, dans mon fichier .js :

Code :

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

1
2
var titre = document.getElementsByTagName('h1')[0];
titre.textContent += ' (' + document.getElementsByTagName('h3').length + ')';

Et là, au chargement de ma page... Rien. Et quand je tente "alert(titre)", j'ai undefined...

Là j'avoue ne plus rien comprendre.
Merci à vous en tout cas!

**kOrt3x** · 16/03/2011, 23h25

Bonjour,

Dans un premier temps, si tu peux modifier ton post afin d'utiliser les balises CODE pour une meilleure lisibilité.

Est-ce que que tu as que ça dans ton code JavaScript ? Peux-tu nous en donner un peu plus ?

**Alba.1337** · 16/03/2011, 23h26

Ah bah non, je n'ai que ça, pour faire la tâche qui est demandée...
Limite j'aurais pu juste mettre :

Code :

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

document.getElementsByTagName('h1')[0].textContent += ' (' + document.getElementsByTagName('h3').length + ')';

Enfin selon ce que j'avais cru comprendre de javascript, qui apparemment est faux

**Alba.1337** · 16/03/2011, 23h47

Rebonsoir, j'ai trouvé la solution... Ou en tout cas une solution.
La balise <script> était écrite entre les balises <head>, je l'ai déplacée juste avant la fermeture de ma balise <body>.
Existe t-il un moyen, en laissant la balise <script> entre les balises <head>, de forcer le contenu du fichier .js à n'être interprété qu'en fin de chargement de la page?

**Willpower** · 16/03/2011, 23h49

chez moi ton code fonctionne nickel ! (enfin, j'ai remplacé "textContent" par "innerHTML" pour être compatible avec IE en plus des autres navigateurs)

à mon avis ton problème est que tu places ton codes javascript avant ton code html (par exemple dans le header) et que donc lors de son exécution les balises <h1> et <h3> n'existent pas encore et sont introuvables par ton code !

donc soit tu places ton code javascript à la fin de ton body (pas recommandé ) soit tu rajoutes une instruction dans ton code javascript signalant qu'il ne soit s'exécuté qu'une fois la page complètement chargée ! comme ceci :

Code :

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

1
2
3
4
window.onload = function(){
	var titre = document.getElementsByTagName('h1')[0];
	titre.innerHTML += ' (' + document.getElementsByTagName('h3').length + ')';
}

edit: arg, t'as posté en même temps que moi, saloperie ^^

**Alba.1337** · 16/03/2011, 23h56

Ah bah on a posté en même temps, mais c'est là que t'es balèze!
Tu réponds à une question pas encore posée! Merci!

**Loceka** · 17/03/2011, 08h46

Sinon la solution la plus commune est d'utiliser l'attribut onload de la balise body (qui a à peu près le même comportement que le window.onload dont parle Willpower) :

Code html :

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

1
2
3
<body onload="modifieTitre()">
<!-- contenu de la page -->
</body>

javascript de la théorie à la pratique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager