[Résolu]Petites précisions (variables globales et locales) dans le DOM

Bonjour tout le monde,

Cette question va vous sembler peut être évidente, mais comme je suis pas un cador en js, je ne comprends pas bien pourquoi j'ai une réaction différentes. Je m'explique :

Lorsque j'écris ceci :

<script type="text/javascript">
	var exemple = document.getElementById("exemple").getElementsByTagName("p")[0];
	exemple.onmouseover = function(){
		this.style.color = "red";
	}
</script>

la variable « exemple » est null. Alors que si j'écris cela :

<script type="text/javascript">
function uneFonction(){
	var exemple = document.getElementById("exemple").getElementsByTagName("p")[0];
	exemple.onmouseover = function(){
		this.style.color = "red";
	}
}
</script>

<div id="exemple">
	<h2>Exemple</h2>
		<p>un paragraphe</p>
</div>

La variable « exemple » récupère bien un élément. Je me doute que ma première écriture est à éviter. Cependant, j'aimerai comprendre pourquoi le premier script ne fonctionne pas. Également, comment est il possible de tester la valeur de la variable « exemple ».

Si une petite âme charitable passe par là, je la remercie par avance.
Bon code.
Modifié par Nolem (24 Nov 2009 - 17:47)

Dans ton deuxième cas, une fonction fait appel à l'élément. Dans le premier cas, l'élément n'a pas été défini, parce qu'il va chercher dans "document" qui n'existe pas encore. Il faut donc exécuter ce code seulement une fois que la page est chargée, une fois que <div id="exemple"> a été créé :

<script type="text/javascript"> 
window.onload = function()
{
    var exemple = document.getElementById("exemple").getElementsByTagName("p")[0]; 
    exemple.onmouseover = function(){ 
        this.style.color = "red"; 
    } 
} 
</script> 

Note que si tu plaçais le JS après le <div>, ça fonctionnerait, puisque là, le <div> est déjà créé :

<div id="exemple"> 
    <h2>Exemple</h2> 
        <p>un paragraphe</p> 
</div> 
<script type="text/javascript"> 
    var exemple = document.getElementById("exemple").getElementsByTagName("p")[0]; 
    exemple.onmouseover = function(){ 
        this.style.color = "red"; 
    } 
</script> 

Mais ça, c'est à éviter.

Le mieux est de faire une page HTML normale, et d'utiliser le JavaScript dans un autre fichier pour interagir sur les éléments.
Donc non, ce premier cas revisité est mieux que ton deuxième cas, où la fonction est appelée dans le code HTML d'après ce que j'ai compris (même si on ne le voit pas dans ton code).
Modifié par Oracle (24 Nov 2009 - 17:24)

Bonsoir Oracle,

Oracle a écrit :

[...] Dans le premier cas, l'élément n'a pas été défini, parce qu'il va chercher dans "document" qui n'existe pas encore. Il faut donc exécuter ce code seulement une fois que la page est chargée, [...]

Ton explication est explicite et je t'en remercie. En effet, je me doute que ton 2e exemple est à éviter puisqu'il y a un mélange d'html/js et que ça doit être intrusif.

Merci en tout cas.
Modifié par Nolem (24 Nov 2009 - 17:48)