Pourquoi mon script utilisateur obtient-il une erreur « Uncaught ReferenceError : Function Not Defined » lors de l'utilisation d'onclick, et comment puis-je la corriger ?

Erreur de référence non capturée : fonction non définie avec OnClick

Lorsque vous essayez d'ajouter des émoticônes personnalisées à un site Web à l'aide d'un script utilisateur, vous pouvez rencontrer une erreur indiquant : "Erreur de référence non capturée : la fonction n'est pas définie" en cliquant sur un bouton avec un attribut onclick.

Comprendre le Problème

Les scripts utilisateur fonctionnent dans un environnement sandbox, empêchant l'accès direct aux fonctions existant dans la portée de la page Web cible. L'attribut onclick utilise la portée de cette page Web, ce qui entraîne son échec lorsqu'il est utilisé dans un script utilisateur.

Solution : utilisation de addEventListener()

Pour résoudre ce problème, évitez d'utiliser onclick() et des attributs similaires. dans les scripts utilisateur. Optez plutôt pour la méthode addEventListener() (ou une fonction de bibliothèque équivalente telle que jQuery .on() à cet effet.

Réécriture du code

Par exemple, le code suivant utilisant onclick :

something.outerHTML += '<input onclick="resetEmotes()">

Peut être réécrit en utilisant addEventListener() :

something.outerHTML += '<input>

Loop and Event Listener Modifications

De plus, évitez de transmettre des données directement aux écouteurs d'événements en utilisant un code comme celui-ci :

emoteTab[2].innerHTML += '<span>

Utilisez plutôt des attributs de données et ajoutez des écouteurs d'événements séparément, comme indiqué ci-dessous :

for (i = 0; i < EmoteURLLines.length; i++) {
  if (checkIMG(EmoteURLLines[i])) {
    emoteTab[2].innerHTML += '<span>

Dans l'appendEmote function :

function appendEmote(zEvent) {
  var emoteUsage = this.getAttribute("data-usage");
  shoutdata.value += emoteUsage;
}

Avertissements

Évitez de réutiliser le même identifiant pour plusieurs éléments car il est invalide. Chaque page ne peut avoir qu'une seule instance d'un identifiant particulier.

De plus, soyez prudent lorsque vous utilisez .outerHTML ou .innerHTML car ils suppriment les gestionnaires d'événements existants des nœuds concernés.

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!