Uncaught ReferenceError: funkcja nie jest zdefiniowana w onclick

85

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 spantagu onclickrozmowy z funkcji:

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

Za każdym razem, gdy klikam przycisk, który ma onclickatrybut, 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 undefinedbłą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&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);
ECMAScript
źródło
2
Prześlij tylko odpowiedni kod. Przeczytaj zasady.
alt
1
Link do pełnego skryptu jest zawsze odpowiedni i mile widziany, oprócz odpowiednich fragmentów kodu, które powinny znajdować się w Twoim poście.
Brock Adams

Odpowiedzi:

133

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 onclickdział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:

  • Twój kod ponownie wykorzystuje ten sam identyfikator dla kilku elementów. Nie rób tego, to nieważne. Podany identyfikator powinien występować tylko raz na stronę.
  • Za każdym razem, gdy używasz .outerHTMLlub .innerHTML, usuwasz wszystkie programy obsługi zdarzeń w dotkniętych węzłach. Jeśli używasz tej metody, uważaj na ten fakt.
Brock Adams
źródło
1
Otrzymuję ten błąd: Uncaught TypeError: Object 3 nie ma metody „addEventListener”
ECMAScript
Więc robisz to źle. Link do pełnego skryptu, który spowodował ten błąd, ORAZ link do strony docelowej, na której działa.
Brock Adams
2
Naprawiono to użyłem: btnreset.onclick = function () {resetEmotes (); }; Dzięki!
ECMAScript,
Cieszę się, że to działa, ale ta technika działa tylko w niektórych warunkach i nie jest przenośna.
Brock Adams
Mój kod jest naprawdę słabo zakodowany, więc ponownie koduję całość i używam jQuery. Dzięki!
ECMAScript,
3

Otrzymałem błąd (używam Vue) i przełączyłem się onclick="someFunction()"na @click="someFunction"i teraz działają.

nbixler
źródło
pytanie nie jest związane z Vue
Dave Manuel
1

Mam to rozwiązane w kątowym (click) = "someFuncionName()"w pliku .html dla określonego komponentu.

Alferd Nobel
źródło
0

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>
Mohammad reza hedayat nia
źródło
0

Myślę, że umieściłeś funkcję w $ (document) .ready ....... Funkcje są zawsze dostarczane w $ (document) .ready .......

Mouhcine Mtg
źródło
-2

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'.

Vũ Đức Vĩ
źródło
1
To nie jest odpowiedź. Możesz zamieścić to jako komentarz (budując odpowiednią reputację). Przeczytaj: Jak napisać dobrą odpowiedź?
EhsanT