Ich versuche, ein Benutzer-Skript 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 onclick
ruft diese Funktion auf:
function appendEmote(em) {
shoutdata.value += em;
}
Jedes Mal, wenn ich auf eine Schaltfläche mit einem onclick
Attribut klicke, wird folgende Fehlermeldung angezeigt:
Nicht erfasster ReferenceError: Funktion ist nicht definiert.
Jede Hilfe wäre dankbar.
Vielen Dank!
Aktualisieren
Ich habe versucht:
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 einen undefined
Fehler bekommen.
Hier ist das Skript .
Ich habe versucht, dies zu tun, um zu testen, ob Zuhörer funktionieren und sie 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&popup=true&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);
javascript
onclick
userscripts
ECMAScript
quelle
quelle
Antworten:
Verwenden Sie niemals
.onclick()
oder ähnliche Attribute aus einem Userscript! (Es ist auch eine schlechte Praxis auf einer normalen Webseite ).Der Grund dafür ist, dass Benutzerskripte in einer Sandbox ("isolierte Welt") und
onclick
im Bereich der Zielseite ausgeführt werden und keine von Ihrem Skript erstellten Funktionen sehen können.Verwenden Sie immer
addEventListener()
Doc (oder eine gleichwertige 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 solchen Ereignis-Listener übergeben. Siehe Dokument . Und jedes Mal, wenn Sie sich so ändern
innerHTML
, zerstören Sie die vorherigen Ereignis-Listener!Ohne Ihren Code stark umzugestalten, 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:
.outerHTML
oder verwenden.innerHTML
, werfen Sie Event-Handler auf den betroffenen Knoten in den Papierkorb. Wenn Sie diese Methode verwenden, achten Sie auf diese Tatsache.quelle
Ich habe den Fehler erhalten (ich verwende Vue) und habe meinen
onclick="someFunction()"
auf umgestellt@click="someFunction"
und jetzt funktionieren sie.quelle
Wenn die Funktion bei Verwendung dieser Funktion in HTML nicht definiert ist, z. B. onclick = 'function ()', bedeutet dies, dass sich die Funktion in einem Rückruf befindet, in meinem Fall 'DOMContentLoaded'.
quelle