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 += '<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);}

附录Emote是这样的：

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

  ，则会丢弃受影响节点上的任何事件处理程序。如果您使用这种方法，请注意这一事实。

Answer 2

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

Answer 3

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