Próbuję utworzyć skrypt użytkownika dla witryny internetowej, aby dodać niestandardowe emotikony. Jednak otrzymuję wiele błędów.
Oto funkcja:
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.");
}
}
W span
tagu onclick
rozmowy z funkcji:
function appendEmote(em) {
shoutdata.value += em;
}
Za każdym razem, gdy klikam przycisk, który ma onclick
atrybut, pojawia się ten błąd:
Uncaught ReferenceError: funkcja nie jest zdefiniowana.
Każda pomoc będzie mile widziana.
Dziękuję Ci!
Aktualizacja
Próbowałem użyć:
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);
Ale mam undefined
błąd.
Oto skrypt .
Próbowałem to zrobić, aby sprawdzić, czy słuchacze działają, a dla mnie nie:
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
źródło
źródło
Odpowiedzi:
Nigdy nie używaj
.onclick()
ani podobnych atrybutów ze skryptu użytkownika! (To także kiepska praktyka na zwykłej stronie internetowej ).Powodem jest to, że skrypty użytkownika działają w piaskownicy („izolowanym świecie”) i
onclick
działają w zakresie strony docelowej i nie widzą żadnych funkcji tworzonych przez skrypt.Zawsze używaj
addEventListener()
Doc (lub równoważnej funkcji bibliotecznej, takiej jak jQuery .on () ).Więc zamiast kodu takiego jak:
something.outerHTML += '<input onclick="resetEmotes()" id="btnsave" ...>'
Użyłbyś:
something.outerHTML += '<input id="btnsave" ...>' document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);
W przypadku pętli nie można przekazywać danych do takiego nasłuchiwania zdarzeń. Zobacz dokumentację . Dodatkowo za każdym razem, gdy się tak zmieniasz
innerHTML
, niszczysz słuchaczy poprzedniego wydarzenia!Bez zbytniego refaktoryzacji kodu możesz przekazywać dane z atrybutami danych. Więc użyj takiego kodu:
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); }
Gdzie appendEmote jest jak:
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; }
OSTRZEŻENIA:
.outerHTML
lub.innerHTML
, usuwasz wszystkie programy obsługi zdarzeń w dotkniętych węzłach. Jeśli używasz tej metody, uważaj na ten fakt.źródło
Otrzymałem błąd (używam Vue) i przełączyłem się
onclick="someFunction()"
na@click="someFunction"
i teraz działają.źródło
Mam to rozwiązane w kątowym
(click) = "someFuncionName()"
w pliku .html dla określonego komponentu.źródło
Upewnij się, że używasz modułu Javascript, czy nie ?! jeśli używasz modułów js6, atrybuty zdarzeń html nie będą działać. w takim przypadku musisz przenieść swoją funkcję z zakresu globalnego do zakresu modułu. Po prostu dodaj to do swojego pliku javascript:
window.functionName= functionName;
przykład:
<h1 onClick="functionName">some thing</h1>
źródło
Myślę, że umieściłeś funkcję w $ (document) .ready ....... Funkcje są zawsze dostarczane w $ (document) .ready .......
źródło
Jeśli funkcja nie jest zdefiniowana podczas używania tej funkcji w html, na przykład onclick = 'function ()', oznacza to, że funkcja jest w wywołaniu zwrotnym, w moim przypadku jest to 'DOMContentLoaded'.
źródło