Uncought ReferenceErrorError: functie is niet gedefinieerd met OnClick

Ik probeer een -gebruiken te maken voor een website om aangepaste emotes toe te voegen. Ik heb echter veel fouten gehad.

Hier is de functie:

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

De spantag’s onclickroept deze functie op:

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

Telkens als ik op een knop klik die een onclickattribuut heeft, krijg ik deze foutmelding:

Uncought ReferenceError: functie is niet gedefinieerd.

Update

Ik heb geprobeerd met behulp van:

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

Maar ik heb een undefinedfout.

Hier is de script .

Ik probeerde dit te doen om te testen of luisteraars werken en ze niet voor mij:

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

Antwoord 1, Autoriteit 100%

Gebruik nooit .onclick()of soortgelijke kenmerken uit een gebruikerscript! (het is ook Slechte praktijk op een gewone webpagina ).

De reden is dat gebruikersscripts in een sandbox (“geïsoleerde wereld”) werken en onclickbinnen het bereik van de doelpagina werkt en geen functies kan zien die door uw script worden gemaakt.

Gebruik altijd addEventListener()Doc(of een vergelijkbare bibliotheekfunctie, zoals jQuery .on()).

Dus in plaats van code zoals:

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

Je zou gebruiken:

something.outerHTML += '<input id="btnsave" ...>'
document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);

Voor de lus, je kunt geen gegevens doorgeven aan zo’n gebeurtenislistener. Zie het document. En elke keer dat je innerHTMLzo verandert, vernietig je de vorige gebeurtenislisteners!

Zonder uw code veel te herstructureren, kunt u gegevens doorgeven met gegevenskenmerken. Gebruik dus code als volgt:

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

waar bijlage is zoals:

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

WAARSCHUWINGEN:

  • Uw code herbruikt dezelfde ID voor verschillende elementen. Doe dit niet, het is ongeldig. Een gegeven ID moet slechts één keer per pagina plaatsvinden.
  • Telkens wanneer u .outerHTMLof .innerHTMLgebruikt, drukt u eventuele gebeurtenishandelaars op de getroffen knooppunten af. Als u deze methode gebruikt, pas op voor dat feit.

Antwoord 2

Zorg ervoor dat u JavaScript-module gebruikt of niet?!
Als u JS6-modules gebruikt, werkt uw kenmerken van HTML-gebeurtenissen niet.
In dat geval moet u uw functie van Global Scope naar Module Scope brengen. Voeg dit gewoon toe aan uw JavaScript-bestand:
window.functionName= functionName;

Voorbeeld:

<h1 onClick="functionName">some thing</h1>

Antwoord 3

Ik heb dit in een hoek opgelost met (click) = "someFuncionName()"in het .html-bestand voor de specifieke component.


Antwoord 4

Ik denk dat je de functie in $(document).ready hebt gezet…….
De functies worden altijd geleverd in de $(document).ready…….


Antwoord 5

Ik kreeg de foutmelding (ik gebruik Vue) en ik heb mijn onclick="someFunction()"overgezet naar @click="someFunction"en nu hebben ze werken.


Antwoord 6

Als de functie niet is gedefinieerd bij gebruik van die functie in html, zoals onclick = ‘function () ‘, betekent dit dat de functie in een callback zit, in mijn geval ‘DOMContentLoaded’.


Antwoord 7

Zorg ervoor dat uw functie niet in een callback-functie zit als u een extern js-bestand gebruikt.
Het verwijderen van de callback-functie zou voldoende zijn

(function() {  //comment this out
//your code
})(); //comment this out

Other episodes