Différence de résultat avec un fichier externe

a marqué ce sujet comme résolu.

Bonjour à tous,
je suis en train de faire mes premiers pas avec JS, et (forcément) j'ai quelques problèmes de newbies… Pour le coup, j'ai du mal à trouver des mots-clés efficaces pour Google, donc je viens vers vous ;)

J'ai une petite portion de code qui s’exécute normalement quand je l'insère directement dans mon HTML. Par contre dès que je l'a met dans un fichier à part, il se comporte différemment…

Voilà mon code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var headings = this.document.getElementsByClassName("heading");

alert(headings.length);//DEBUG

//Pour chaque élément on créé un onClick
var i = 0;
while(i < headings.length){
    headings.item(i).onclick = function() {
        alert("Arrête de me cliquer dessus!");
    };
    i++;
}

Pour chaque élément de la classe "heading", je voudrais afficher un petit texte avec onclick. Quand je lance ma page avec le code directement dedans, il n'y a pas de problèmes (le message de debug m'affiche bien le bon nombre d'éléments).
Par contre, quand je met le code dans un fichier externe, j'ai l'impression qu'il a du mal récupérer le "this.document" (le message de debug m'affiche 0 élément…)

Vous savez d'où cela pourrait venir?
"this" est-il identique dans les deux cas?
Si non, comment récupérer le "this" de mon fichier contenant le HTML?

Merci d'avance à tous ceux qui m'aideront :)

+0 -0

Je vois pas du tout pourquoi la réponse de viki possède un "moins un" ???

async et defer me semblent être de bonnes pratiques lorsqu'elles sont utilisées à bon escient.

Cela permet de charger les scripts (pour async, seconde solution évoquée par viki) aussi tôt que possible, sans perturber le rendu de la page, qui s'affichera dans sa version "pure html".

A l'intérieur de ton script, tu attends que la page soit complètement chargée (DOMContentLoaded) avant d'interagir avec le DOM, mais pour autant, le script sera chargé aussi tôt que possible par le navigateur.

Pour ce qui est du scope de this c'est une question à part entière (et assez lourde en Javascript…), mais comme l'a signalé artragis, dans ton cas ce n'est pas ça le soucis, tu devrais accéder au document (et à la window au DOM) à travers des variables globales.

+0 -0

Prend l'habitude d'englober ton code dans une fonction, surtout si tu déclare des variables qui n'ont pas besoin d'être global.

Et prend aussi l'habitude d'utiliser l'event onload de la page.

  • Dans le tag du body :
1
<body onload="main();">
  • En javascript :

Si tu as plusieurs fonctions :

1
2
window.addEventListener("load", main); // attention compatibilité IE
window.addEventListener("load", main2);

Si tu as qu'une seule fonction :

1
window.onload = main; // Avec document.onload ça fonctionne aussi.

J'ai une tendance à utiliser la dernière pour ne pas m'embêter (quand je n'utilise pas jquery).

+0 -0

Prend l'habitude d'englober ton code dans une fonction, surtout si tu déclare des variables qui n'ont pas besoin d'être global.

Et prend aussi l'habitude d'utiliser l'event onload de la page.

  • Dans le tag du body :
1
<body onload="main();">
  • En javascript :

Si tu as plusieurs fonctions :

1
2
window.addEventListener("load", main); // attention compatibilité IE
window.addEventListener("load", main2);

Si tu as qu'une seule fonction :

1
window.onload = main; // Avec document.onload ça fonctionne aussi.

J'ai une tendance à utiliser la dernière pour ne pas m'embêter (quand je n'utilise pas jquery).

A-312

Alors non, non et mouais.

  • Jamais de JS dans le HTML, par pitié, ça fait des années qu'on se bat contre se genre de trucs dégueulasses
  • L'événement load de window est bien différent de l'event DOMContentLoaded de document qui est préférable dans une grande majorité de cas
  • La dernière solution c'est la méthode rapide, mais c'est loin d'être propre : tu peux attacher qu'une fonction comme ça, c'est loin d'être modulable
+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte