अनक्रीफाइड रेफरेंस: फ़ंक्शन को ऑनक्लिक के साथ परिभाषित नहीं किया गया है

Question 1

मैं एक बनाने के लिए कोशिश कर रहा हूँ userscript कस्टम emotes जोड़ने के लिए एक वेबसाइट के लिए। हालाँकि, मुझे बहुत सारी त्रुटियाँ मिल रही हैं।

यहाँ समारोह है:

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

spanटैग की onclickकॉल इस समारोह:

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

हर बार जब मैं एक बटन क्लिक करता हूं onclick, जिसमें एक विशेषता होती है, तो मुझे यह त्रुटि मिलती है:

बिना संदर्भित संदर्भ: फ़ंक्शन परिभाषित नहीं है।

किसी भी सहायता की सराहना की जाएगी।

धन्यवाद!

अपडेट करें

मैंने प्रयोग करने की कोशिश की:

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

लेकिन मुझे एक undefinedत्रुटि मिली ।

यहाँ स्क्रिप्ट है ।

अगर श्रोताओं ने काम किया और वे मेरे लिए नहीं तो मैंने यह करने की कोशिश की:

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

Question 2

उपयोगकर्ता नाम से कभी भी उपयोग .onclick()या समान विशेषताओं का उपयोग न करें ! (यह एक नियमित वेब पेज में भी खराब अभ्यास है )।

कारण यह है कि उपयोगकर्ता एक सैंडबॉक्स ("पृथक दुनिया") में काम करते हैं, और onclickलक्ष्य-पृष्ठ के दायरे में काम करते हैं और आपकी स्क्रिप्ट बनाने वाले किसी भी कार्य को नहीं देख सकते हैं।

हमेशा addEventListener()^डॉक (या समकक्ष लाइब्रेरी फ़ंक्शन, जैसे jQuery .on () ) का उपयोग करें।

इसलिए कोड के बजाय जैसे:

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

आप उपयोग करेंगे:

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

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

लूप के लिए, आप डेटा को इवेंट श्रोता को पास नहीं कर सकते हैं जैसे कि डॉक्टर देखें । साथ ही हर बार जब आप इस innerHTMLतरह बदलते हैं, तो आप पिछले ईवेंट श्रोताओं को नष्ट कर देते हैं!

अपने कोड को बहुत अधिक रिफैक्ट किए बिना, आप डेटा विशेषताओं के साथ डेटा पास कर सकते हैं। तो इस तरह कोड का उपयोग करें:

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

जहां परिशिष्ट इस प्रकार है:

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

चेतावनी:

आपका कोड कई तत्वों के लिए एक ही आईडी का पुन: उपयोग करता है। ऐसा न करें, यह अमान्य है। एक दी गई आईडी प्रति पृष्ठ केवल एक बार होनी चाहिए।
हर बार जब आप उपयोग करते हैं .outerHTMLया .innerHTML, आप प्रभावित नोड्स पर किसी भी घटना संचालकों को कचरा करते हैं। यदि आप इस विधि का उपयोग उस तथ्य से सावधान करते हैं।

Question 3

मुझे त्रुटि प्राप्त हो रही थी (मैं Vue का उपयोग कर रहा हूं) और मैंने अपना स्विच ऑन onclick="someFunction()"किया @click="someFunction"और अब वे काम कर रहे हैं।

Question 4

यदि HTML में उस फ़ंक्शन का उपयोग करते समय फ़ंक्शन को परिभाषित नहीं किया जाता है, जैसे कि onclick = 'function ()', तो इसका मतलब है कि फ़ंक्शन कॉलबैक में है, मेरे मामले में 'DOMContentLoaded' है।