Pourquoi ma fonction « onclick » n'est-elle pas définie dans un script utilisateur et comment puis-je la corriger à l'aide d'écouteurs d'événements ?

Uncaught ReferenceError : la fonction n'est pas définie avec onclick

Lors d'une tentative de création d'un script d'émoticône personnalisé pour un site Web, un problème est survenu entraînant l'erreur "Uncaught ReferenceError : la fonction n'est pas définie avec onclick."

Le problème

Le script contenait balises span avec des attributs onclick qui appellent des fonctions. Cependant, lorsque ces boutons étaient cliqués, les fonctions n'étaient pas reconnues.

La solution

La solution consiste à éviter l'utilisation des attributs onclick des scripts utilisateur, car ils fonctionnent dans un environnement sandbox séparé à partir de la portée de la page cible. À la place, des écouteurs d'événements doivent être utilisés.

Implémentation des écouteurs d'événements

Pour implémenter des écouteurs d'événements, suivez ces étapes :

Remplacez onclick par des écouteurs d'événements

À la place d'utiliser les attributs onclick, remplacez-les par addEventListener() :

<span>

document.getElementById("mySpan").addEventListener("click", myFunction, false);

Transmettre des données avec des attributs de données

Comme nous ne pouvons pas transmettre directement des données aux écouteurs d'événements, nous pouvons utiliser des attributs de données :

<span>

targetSpans = emoteTab[2].querySelectorAll("span[data-usage]");
for (var J in targetSpans) {
    targetSpans[J].addEventListener("click", appendEmote, false);
}

Ajouter une fonction Emote

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

Supplémentaire Avertissements

1. Identifiants uniques :

Assurez-vous que chaque identifiant n'est utilisé qu'une seule fois par page. L'utilisation d'identifiants en double n'est pas valide.

2. Suppression du gestionnaire d'événements :

L'utilisation de .outerHTML ou .innerHTML supprimera les gestionnaires d'événements existants. Soyez prudent lorsque vous utilisez ces méthodes.

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!