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 ?

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>

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!