未捕获的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
错误。
这是脚本。
我试图这样做来测试听众是否正常工作,但他们不适合我:
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&popup=true&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);
回答:
在常规网页中,这也是较差的做法)。
原因是用户脚本在沙箱(“隔离的世界”)中onclick
运行,并且在目标页面范围内运行,并且看不到脚本创建的任何功能。
始终使addEventListener()
Doc(或等效的库函数,如jQuery.on())。
因此,而不是像这样的代码:
something.outerHTML += '<input onclick="resetEmotes()" id="btnsave" ...>'
您将使用:
something.outerHTML += '<input id="btnsave" ...>'document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);
对于循环,您无法将数据传递给类似Seedoc的事件侦听器。再加上每次您进行这样的更改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
,都会在受影响的节点上丢弃所有事件处理程序。如果使用此方法,请当心这一事实。
以上是 未捕获的ReferenceError:函数未使用onclick定义 的全部内容, 来源链接: utcz.com/qa/403700.html