未捕獲的 ReferenceError：未使用 onclick 定義函數

Question

我正在嘗試為網站制作用戶腳本以添加自定義表情。 但是，我遇到了很多錯誤。

這是函數：

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屬性的按鈕時，都會出現此錯誤：

未捕獲的 ReferenceError：未定義函數。

更新

我嘗試使用：

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

Answer 1

切勿使用.onclick()或來自用戶腳本的類似屬性！ （在常規網頁中這也是不好的做法）。

原因是用戶腳本在沙箱（“孤立世界”）中運行，而onclick在目標頁面范圍內運行，無法看到您的腳本創建的任何函數。

始終使用addEventListener() ^Doc （或等效的庫函數，如 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);
}

其中 appendEmote 就像：

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

警告：

• 您的代碼對多個元素重復使用相同的 id。 不要這樣做，這是無效的。 給定的 ID 應該每頁只出現一次。
• 每次使用.outerHTML或.innerHTML ，都會.outerHTML受影響節點上的所有事件處理程序。 如果您使用此方法，請注意這一事實。

Answer 2

確保您使用的是 Javascript 模塊？！ 如果使用 js6 模塊，您的 html 事件屬性將不起作用。 在這種情況下，您必須將您的函數從全局范圍帶到模塊范圍。 只需將此添加到您的 javascript 文件中： window.functionName= functionName;

例子：

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

Answer 3

我在特定組件的 .html 文件中使用(click) = "someFuncionName()"以角度解決了這個問題。

Answer 4

我想你把函數放在 $(document).ready....... 函數總是提供在 $(document).ready......

Answer 5

我收到錯誤消息（我正在使用 Vue），我將onclick="someFunction()"切換為@click="someFunction" ，現在它們正在工作。

Answer 6

如果在 html 中使用該函數時未定義該函數，例如 onclick = 'function () '，則表示該函數處於回調中，在我的情況下為 'DOMContentLoaded'。

Answer 7

如果您使用的是外部 js 文件，請注意您的函數不在回調函數中。 刪除回調函數可以解決問題

(function() {  //comment this out

//your code

})(); //comment this out