Unaught ReferenceError：函数未用onClick定义

Question

Unaught ReferenceError：函数未用onClick定义

我想做一个用户脚本用于添加自定义表情的网站。然而，我还是犯了很多错误。

以下是功能：

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属性，则得到以下错误：

未定义函数。

任何帮助都将不胜感激。

谢谢!

Answer 1

永不使用.onclick()，或者来自userscript的类似属性！(这也是在常规网页中的不良做法).原因是用户脚本在沙箱(“孤立的世界”)中运行，并且onclick在目标页面范围内操作，看不到脚本创建的任何函数。总用addEventListener()博士(或类似jQuery的等效库函数).on()).因此，而不是这样的代码：something.outerHTML&nbsp;+=&nbsp;'<input&nbsp;onclick="resetEmotes()"&nbsp;id="btnsave"&nbsp;...>'你可以使用：something.outerHTML&nbsp;+=&nbsp;'<input&nbsp;id="btnsave"&nbsp;...>'document.getElementById&nbsp;("btnsave").addEventListener&nbsp;("click",&nbsp;resetEmotes,&nbsp;false);对于循环，不能将数据传递给这样的事件侦听器(请参阅医生..再加上每次你改变innerHTML就这样，你破坏了以前的事件侦听器！无需大量重构代码，就可以传递带有数据属性的数据。所以使用这样的代码：for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;EmoteURLLines.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(checkIMG&nbsp;(EmoteURLLines[i]))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localStorage.setItem&nbsp;("nameEmotes",&nbsp;JSON.stringify&nbsp;(EmoteNameLines)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localStorage.setItem&nbsp;("urlEmotes",&nbsp;JSON.stringify&nbsp;(EmoteURLLines)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localStorage.setItem&nbsp;("usageEmotes",&nbsp;JSON.stringify&nbsp;(EmoteUsageLines)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(i&nbsp;==&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log&nbsp;(resetSlot&nbsp;()); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;emoteTab[2].innerHTML&nbsp;&nbsp;+=&nbsp;'<span&nbsp;style="cursor:pointer;"&nbsp;id="'&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;EmoteNameLines[i]&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'"&nbsp;data-usage="'&nbsp;+&nbsp;EmoteUsageLines[i]&nbsp;+&nbsp;'">' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;'<img&nbsp;src="'&nbsp;+&nbsp;EmoteURLLines[i]&nbsp;+&nbsp;'"&nbsp;/></span>' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert&nbsp;("The&nbsp;maximum&nbsp;emote&nbsp;("&nbsp;+&nbsp;EmoteNameLines[i]&nbsp;+&nbsp;")&nbsp;size&nbsp;is&nbsp;(36x36)"); &nbsp;&nbsp;&nbsp;&nbsp;}}//--&nbsp;Only&nbsp;add&nbsp;events&nbsp;when&nbsp;innerHTML&nbsp;overwrites&nbsp;are&nbsp;done.var&nbsp;targetSpans&nbsp;=&nbsp;emoteTab[2].querySelectorAll&nbsp;("span[data-usage]");for&nbsp;(var&nbsp;J&nbsp;in&nbsp;targetSpans)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;targetSpans[J].addEventListener&nbsp;("click",&nbsp;appendEmote,&nbsp;false);}附录Emote是这样的：function&nbsp;appendEmote&nbsp;(zEvent)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//--&nbsp;this&nbsp;and&nbsp;the&nbsp;parameter&nbsp;are&nbsp;special&nbsp;in&nbsp;event&nbsp;handlers.&nbsp;&nbsp;see&nbsp;the&nbsp;linked&nbsp;doc. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;emoteUsage&nbsp;&nbsp;=&nbsp;this.getAttribute&nbsp;("data-usage"); &nbsp;&nbsp;&nbsp;&nbsp;shoutdata.value&nbsp;+=&nbsp;emoteUsage;}警告：您的代码对多个元素重用相同的id。别这么做，这是无效的。每页只应出现一次给定的ID。每次你用.outerHTML或.innerHTML，则会丢弃受影响节点上的任何事件处理程序。如果您使用这种方法，请注意这一事实。

Answer 2

我收到了错误(我正在使用Vue)，我切换了我的onclick="someFunction()"到@click="someFunction"现在他们开始工作了。

Answer 3

修正了我使用的：btnreset.onclick=function(){resetEmotes()；}；谢谢！