Utilisation de document.getElementById

**mielpops77** · 31/12/2019, 12h53

Bonjour à tous

Je débute dans le magnifique monde du java Script

Je rencontre le soucis suivant pour l'utilisation du fameux document.getElementByIdVoila j'ai crée une page html et une page Js pour m'entrainer

Lorsque j'utilise document.getElementById sur ma page html directement avec les balises <script> </script> tout fonctionne très bien mais à partir du moment ou j'essaye d'utiliser document.getElementById sur ma page Js cela ne fonctionne pas , je précise que j'ai mis le fameux <script type="text/javascript" src="monScript.js"></script> sur ma page html

Voici le code sur ma page html , l'utilisation du document.getElementById fonctionne très bien

Code HTML :

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
 
 
 
 
 
		<link rel="icon" href="icon.ico" />
		<link rel="stylesheet" href="style.css" />
 
		<script type="text/javascript" src="monScript.js"></script>
 
 
 
 
 
	</head>
 
 
<body>
 
<div id="myDiv">
    <p>Un peu de texte <a>et un lien</a></p>
</div>
 
<script>
    var div = document.getElementById('myDiv');
 
    alert(div);
</script>
 
 
 
</body>
 
 
	</html>

Maintenant voici ma page Js ou l'utilisation du document.getElementById ne fonctionne pas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var citation1 = "teste1";
var citation2 = "teste2";
var citation3 = "teste3";
var citation4 = "teste4";
var citation5 = "teste5";
 
//document.write(citation1);
 
document.write("bonjour");
 
  var div = document.getElementById('myDiv');
  alert(div);

Voila voila merci d'avance et bonne fêtes de fin d'année à vous

**CosmoKnacki** · 31/12/2019, 13h36

C'est parce que ton script est exécuté avant que la page ait fini de charger. Donc au moment de l'exécution l'élément avec l'id myDiv n'est pas encore connu.

Une solution consiste à placer le lien vers le script à la fin du body.

Une autre solution est de détecter que le code html est chargé et l'arbre DOM construit avec le gestionnaire d'évênements:

Code :

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

1
2
3
document.addEventListener('DOMContentLoaded', function() {
    // ton code ici
}, false);

PS: JavaScript s'écrit en un seul mot ~~sans~~ avec S majuscule.

**javatwister** · 31/12/2019, 14h58

Et puis revois un peu tes sources pour "débuter": document.write est proscrit depuis 20 ans en JavaScript

**mielpops77** · 31/12/2019, 15h00

Un grand merci à vous

Utilisation de document.getElementById

JavaScript

Discussions similaires

Partager

Partager