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

Question

J'essaie de faire un usercript pour un site web permettant d'ajouter des émoticônes personnalisées. Cependant, je reçois beaucoup d'erreurs.

Voici la fonction :

function saveEmotes() {
    removeLineBreaks();
    EmoteNameLines = EmoteName.value.split("\n");
    EmoteURLLines = EmoteURL.value.split("\n");
    EmoteUsageLines = EmoteUsage.value.split("\n");

    if (EmoteNameLines.length == EmoteURLLines.length && EmoteURLLines.length == EmoteUsageLines.length) {
        for (i = 0; i < EmoteURLLines.length; i++) {
            if (checkIMG(EmoteURLLines[i])) {
                localStorage.setItem("nameEmotes", JSON.stringify(EmoteNameLines));
                localStorage.setItem("urlEmotes", JSON.stringify(EmoteURLLines));
                localStorage.setItem("usageEmotes", JSON.stringify(EmoteUsageLines));
                if (i == 0) {
                    console.log(resetSlot());
                }
                emoteTab[2].innerHTML += '<span style="cursor:pointer;" onclick="appendEmote(\'' + EmoteUsageLines[i] + '\')"><img src="' + EmoteURLLines[i] + '" /></span>';
            } else {
                alert("The maximum emote(" + EmoteNameLines[i] + ") size is (36x36)");
            }
        }
    } else {
        alert("You have an unbalanced amount of emote parameters.");
    }
}

Le site span de l'étiquette onclick appelle cette fonction :

function appendEmote(em) {
    shoutdata.value += em;
}

Chaque fois que je clique sur un bouton qui a un onclick j'obtiens cette erreur :

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

Mise à jour

J'ai essayé d'utiliser :

emoteTab[2].innerHTML += '<span style="cursor:pointer;" id="'+ EmoteNameLines[i] +'"><img src="' + EmoteURLLines[i] + '" /></span>';
document.getElementById(EmoteNameLines[i]).addEventListener("click", appendEmote(EmoteUsageLines[i]), false);

Mais j'ai eu un undefined erreur.

Voici le script .

J'ai essayé de faire cela pour tester si les écouteurs fonctionnent et ils ne le font pas pour moi :

emoteTab[2].innerHTML = '<td class="trow1" width="12%" align="center"><a id="togglemenu" style="cursor: pointer;">Custom Icons</a></br><a style="cursor: pointer;" id="smilies" onclick=\'window.open("misc.php?action=smilies&amp;popup=true&amp;editor=clickableEditor","Smilies","scrollbars=yes, menubar=no,width=460,height=360,toolbar=no");\' original-title="">Smilies</a><br><a style="cursor: pointer;" onclick=\'window.open("shoutbox.php","Shoutbox","scrollbars=yes, menubar=no,width=825,height=449,toolbar=no");\' original-title="">Popup</a></td></br>';
document.getElementById("togglemenu").addEventListener("click", changedisplay,false);

Answer 1

Vérifiez que votre fonction ne se trouve pas dans une fonction de rappel si vous utilisez un fichier js externe. La suppression de la fonction de rappel devrait faire l'affaire.

(function() {  //comment this out

//your code

})(); //comment this out

Answer 2

Si la fonction n'est pas définie lors de l'utilisation de cette fonction en html, comme onclick = 'function () ', cela signifie que la fonction est dans un callback, dans mon cas 'DOMContentLoaded'.