如何解决未捕获的类型错误：翻译不是函数 解决方案说明更多说明
当我单击应该触发翻译功能的按钮时，不断收到未捕获的类型错误。不确定是什么原因造成的。我尝试将元素从按钮元素更改为按钮类型的输入元素。无论我做什么，我仍然会收到此错误。有人可以帮忙吗？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="xtext/2.24.0/xtext-ace.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.6/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0,fileIndex);
require.config({
baseUrl: baseUrl,paths: {
"jquery": "webjars/jquery/3.5.1/jquery.min","ace/ext/language_tools": "webjars/ace/1.3.3/src/ext-language_tools","xtext/xtext-ace": "xtext/2.24.0/xtext-ace"
}
});
require(["webjars/ace/1.3.3/src/ace"],function() {
require(["xtext/xtext-ace"],function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,syntaxDefinition: "xtext-resources/generated/mode-logic"
});
});
});
</script>
<script>
function translate() {
console.log("function being triggered.");
let req = new XMLHttpRequest();
console.log("request created");
req.open( "POST","localhost:8003/translate",false);
req.send(ace.edit('xtext-editor').getSession().getValue());
return req.responseText;
}
</script>
</head>
<div class="container">
<div class="header">
<h1>Example LogicLang Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="logic"></div>
</div>
</div>
<form onsubmit = "return false">
<input type="button" onclick="translate()"> Compile </input>
<button class="save-button" onclick="console.log(ace.edit('xtext-editor').getSession().getValue());"> Test </button>
</form>
</body>
</html>
解决方法
您需要为该函数使用不同的名称。translate() 已经是用于 2D Canvas 绘图的现有方法。
translate() 是一种 2D 绘图上下文的方法。 translate(x,y) 方法将画布及其原点水平移动 x 个单位，垂直移动 y 个单位。 source.
,解决方案
通过定义一个 JS 事件处理程序属性来避免这种情况：
document.querySelector("input[type=button]").addEventListener("click",translate)
// or
jQuery('input[type="button"]').on("click",translate)
这将创建一个具有更可预测（可能是全局）范围的处理程序。为获得最佳实践，还可以使用 event delegation。
说明
定义为 html 元素属性的处理程序函数的词法范围已经具有 translate 属性。
JS 函数是 bundled together with references to their surrounding state (the lexical environment)。当你将一个 HTML 属性设置为一串 js 代码时，你就隐式地定义了一个 HTML 元素范围内的函数。
您的 <input> 元素将从这些接口继承属性：HTMLElement -> HTMLInputElement -> Node -> Event Target。我们可以检查它们是否有 translate 属性：
console.log(Object.getOwnPropertyNames(EventTarget.prototype).includes("translate"))
// > false
console.log(Object.getOwnPropertyNames(Node.prototype).includes("translate"))
// > false
console.log(Object.getOwnPropertyNames(HTMLInputElement.prototype).includes("translate"))
// > false
console.log(Object.getOwnPropertyNames(HTMLElement.prototype).includes("translate"))
// > trueHTMLElement interface 包含一个“translate”属性，它是一个布尔值。因此，处理程序中的 translate 引用被解析为该值，并且您将收到一个 TypeError 告诉您“translate 不是函数”，因为您正在尝试调用布尔值
更多说明
如果我在 Chrome DevTools 控制台中运行它：
const div = document.createElement("div");
function translate() {
console.log(".")
};
div.setAttribute("onclick","translate()");
getEventListeners(div).click[0]
我可以检查侦听器，并查看作用域链：
listener: ƒ onclick(event)
arguments: null
caller: null
length: 1
name: "onclick"
prototype: { constructor: ƒ }
__proto__: ƒ()
[[FunctionLocation]]:
[[Scopes]]: Scopes[4]
0: With Block { align: "",title: "",lang: "",translate: true,dir: "",... }
1: With Block { location: Location,jQuery321081306834416800691: {…},implementation: DOMImplementation,URL: "https://....com/",… }
2: Script { div: div }
3: Global { window: Window,self: Window,document: document,name: "",location: Location,… }
once: false
passive: false
type: "click"
useCapture: false
作用域链列表中的第一个对象是触发处理程序的 <div>。通常，以 html 元素属性方式定义的函数作用域链将类似于： (1) 调用对象 -> (2) HTML 元素 -> (3) 。 . .之间的东西。 . . -> (4) 文档 -> (5) 全局。
当一个变量被解析或查找时，js 会沿着作用域链向上移动，直到找到定义。如果您以通常的方式在脚本中声明一个非嵌套函数，它将是全局对象的一个属性。如果全局范围和定义处理程序的 HTML 元素之间的任何内容具有与您的函数同名的属性，则对您的函数的引用将被解析为该属性而不是您的函数。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
