Maison > interface Web > js tutoriel > Pourquoi mon script utilisateur obtient-il une « Erreur de référence : fonction non définie » lors du clic sur un élément HTML et comment puis-je y remédier ?

Pourquoi mon script utilisateur obtient-il une « Erreur de référence : fonction non définie » lors du clic sur un élément HTML et comment puis-je y remédier ?

Barbara Streisand
Libérer: 2024-11-21 12:20:10
original
598 Les gens l'ont consulté

Why Does My Userscript Get a

ReferenceError : Fonction non définie sur le clic d'un élément HTML

Problème

Lors de la tentative de création d'un script utilisateur pour ajouter des émoticônes personnalisées à un site Web, l'erreur "Uncaught ReferenceError : la fonction n'est pas définie" se produit lorsque vous cliquez sur des boutons avec un onclick attribut.

Solution

Le problème vient de l'utilisation des attributs onclick dans le script utilisateur. Les scripts utilisateur s'exécutent dans un environnement sandbox distinct de la page cible, de sorte que les événements onclick créés dans le script utilisateur ne peuvent pas accéder aux fonctions définies dans la page.

Pour résoudre ce problème, il est essentiel d'utiliser addEventListener() au lieu des attributs onclick. Cela garantit que les écouteurs d'événements sont correctement ajoutés et peuvent accéder aux fonctions définies dans le script utilisateur.

Exemple

Voici une version révisée du code qui résout le problème :

// Replace onclick attribute with event listener
emoteTab[2].innerHTML += '<span>
Copier après la connexion

Considérations supplémentaires

Attribut de données Utilisation :

Au lieu de transmettre des données dans l'attribut onclick du gestionnaire d'événements, comme cela a été tenté précédemment, il est recommandé d'utiliser des attributs de données pour stocker les données dans l'élément HTML lui-même.

Duplication d'ID :

Évitez de réutiliser le même identifiant pour plusieurs éléments, car c'est une pratique invalide qui peut conduire à un comportement inattendu.

innerHTML Écrasements :

Lors de la modification du innerHTML d'un élément, tous les gestionnaires d'événements existants sont supprimés. Par conséquent, il est crucial de recréer les écouteurs d'événements après avoir apporté des modifications HTML.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal