it-swarm.com.de

Uncaught ReferenceError: Funktion ist nicht mit onclick definiert

Ich versuche, ein UserScript für eine Website zu erstellen, um benutzerdefinierte Emotes hinzuzufügen. Ich habe jedoch viele Fehler bekommen.

Hier ist die Funktion:

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.");
    }
}

Das span-Tag des onclick ruft diese Funktion auf:

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

Jedes Mal, wenn ich auf eine Schaltfläche klicke, die ein onclick -Attribut enthält, wird der folgende Fehler angezeigt:

Nicht erfasster ReferenceError: Funktion ist nicht definiert.

Jede Hilfe wäre dankbar.

Danke!

Aktualisieren

Ich habe versucht mit:

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);

Aber ich habe eine undefined Fehlermeldung bekommen.

Hier ist das Skript .

Ich habe dies versucht, um zu testen, ob die Zuhörer funktionieren und nicht für mich:

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);
64
ECMAScript

Verwenden Sie niemals .onclick() oder ähnliche Attribute aus einem UserScript! (Es ist auch schlechte Praxis in einer regulären Webseite ).

Der Grund dafür ist, dass Benutzerskripte in einer Sandbox ("isolierte Welt") und onclick im Zielseitenbereich ausgeführt werden und keine von Ihrem Skript erstellten Funktionen sehen können.

Verwenden Sie immer addEventListener()Doc (oder eine äquivalente Bibliotheksfunktion wie jQuery . on () ).

Also anstelle von Code wie:

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


Sie würden verwenden:

something.outerHTML += '<input id="btnsave" ...>'

document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);

Für die Schleife können Sie keine Daten an einen Ereignis-Listener wie diesen übergeben. Siehe das Dokument . Jedes Mal, wenn Sie innerHTML auf diese Weise ändern, zerstören Sie die vorherigen Event-Listener!

Ohne großen Umbau Ihres Codes können Sie Daten mit Datenattributen übergeben. Verwenden Sie also folgenden Code:

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;" id="' 
                                + EmoteNameLines[i] 
                                + '" data-usage="' + EmoteUsageLines[i] + '">'
                                + '<img src="' + EmoteURLLines[i] + '" /></span>'
                                ;
    } else {
        alert ("The maximum emote (" + EmoteNameLines[i] + ") size is (36x36)");
    }
}
//-- Only add events when innerHTML overwrites are done.
var targetSpans = emoteTab[2].querySelectorAll ("span[data-usage]");
for (var J in targetSpans) {
    targetSpans[J].addEventListener ("click", appendEmote, false);
}

Wo appendEmote ist wie:

function appendEmote (zEvent) {
    //-- this and the parameter are special in event handlers.  see the linked doc.
    var emoteUsage  = this.getAttribute ("data-usage");
    shoutdata.value += emoteUsage;
}


Warnhinweise:

  • Ihr Code verwendet dieselbe ID für mehrere Elemente. Tu das nicht, es ist ungültig. Eine bestimmte ID sollte nur einmal pro Seite vorkommen.
  • Jedes Mal, wenn Sie .outerHTML oder .innerHTML, Sie verwerfen alle Event-Handler auf den betroffenen Knoten. Wenn Sie diese Methode verwenden, achten Sie auf diese Tatsache.
106
Brock Adams

Ich habe den Fehler erhalten (ich verwende Vue) und habe mein onclick="someFunction()" auf @click="someFunction" Umgestellt, und jetzt funktionieren sie.

0
nbixler