未捕获的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属性的按钮时，都会出现此错误：

未捕获的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错误。

这是脚本。

我尝试执行此操作以测试侦听器是否正常工作，而他们却没有对我来说是t：

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

仅发布相关代码。阅读规则。

除了应该在您的帖子中找到的相关代码段之外，指向完整脚本的链接始终是适当的并且值得赞赏。

#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时，都会破坏受影响节点上的所有事件处理程序。如果您使用此方法，请当心这一事实。

我收到此错误：未捕获的TypeError：对象3没有方法'addEventListener'

– ECMAScript
2013年6月29日10:49

那你做错了。链接到产生该错误的完整脚本，并链接到运行该脚本的目标页面。

–布鲁克·亚当斯（Brock Adams）
13年6月29日在12:02

修复了我使用的问题：btnreset.onclick = function（）{resetEmotes（）; };谢谢！

– ECMAScript
13年6月29日在13:12

很高兴您能使用，但是该技术仅在某些条件下有效，并且不便于移植。

–布鲁克·亚当斯（Brock Adams）
13年6月29日在21:17

我的代码确实编码不正确，所以我要重新编码整个内容并使用jQuery。谢谢！

– ECMAScript
2013年6月30日23:48

#2 楼

我收到错误消息（我正在使用Vue），我将onclick="someFunction()"切换为@click="someFunction"，现在它们可以正常工作了。

这个问题与Vue无关

–戴夫·曼努埃尔（Dave Manuel）
6月4日4:50

#3 楼

确保使用的不是Javascript模块吗？！
如果使用js6模块，则HTML事件属性将不起作用。在这种情况下，必须将函数从全局范围引入模块范围。只需将其添加到您的javascript文件中：
window.functionName= functionName;
示例：

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

#4 楼

我认为您将函数放在$（document）.ready .......
函数始终在$（document）.ready .......
中提供

#5 楼

对于特定组件，我在.html文件中用(click) = "someFuncionName()"解决了这个问题。

#6 楼

如果在html中使用该函数时未定义该函数，例如onclick ='function（）'，则意味着该函数位于回调中，在我的情况下为'DOMContentLoaded'。

这不是答案。您可以将其发布为评论（通过建立适当的声誉）。请阅读我如何写一个好的答案？

– EhsanT
6月1日下午13:44

编程黑洞网