Pourquoi mon code JSFiddle ne fonctionne-t-il pas sur mon propre site Web ?

Le code JSFiddle ne fonctionne pas dans votre propre page : dépannage de l'exécution de JavaScript

Vous avez rencontré un problème où le code qui fonctionne parfaitement dans JSFiddle fonctionne mal lorsque incorporé dans votre propre page Web. Pour résoudre ce problème déroutant, examinons les causes sous-jacentes.

Le coupable réside dans l'emplacement du code JavaScript. Dans JSFiddle, il est intégré dans un gestionnaire onload, garantissant qu'il s'exécute une fois la page entière chargée. Cependant, lorsque vous incluez directement le code dans vos fichiers HTML/JS et CSS liés dans le head, il s'exécute prématurément.

À ce stade, les éléments d'entrée n'ont pas encore été analysés, ce qui entraîne $('input [type="range"]') pour ne donner aucun résultat. Pour remédier à cela, votre code doit s'exécuter une fois que tous les éléments de la page ont été traités.

Solution : Onload Handler ou Document Ready Handler

Pour y parvenir, vous pouvez envelopper votre code dans un gestionnaire de chargement :

window.onload = function() {
    // your code here
};

Vous pouvez également utiliser le document prêt de jQuery gestionnaire :

$(document).ready(function() {
    // your code here
});

Ou inclure le script à la fin de la page

Une autre option consiste à inclure le script à la fin de la page, ce qui garantit qu'il s'exécute après tous les éléments ont été analysés.

Conclusion

En résolvant ce problème problème, vous vous assurerez que votre code JavaScript se comporte de manière cohérente à la fois dans JSFiddle et dans votre propre page Web. N'oubliez pas de prendre en compte le timing d'exécution de votre code JavaScript pour éviter des pièges similaires à l'avenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!