Uncaught ReferenceError：函数没有用onclick定义

我正在尝试为网站添加自定义表情 。 不过，我得到了很多错误。

这是function：

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

每当我点击一个button，有一个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错误。

这是脚本 。

我试图做这个testing，如果听众的工作，他们不适合我：

 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在目标页面范围内运行，并且看不到脚本创build的任何函数。

总是使用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 ，都会在受影响的节点上垃圾回收任何事件处理程序。 如果您使用这种方法，请注意这一事实。