Javascript 函数在锚标记的 onclick 事件中未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38372709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript function is undefined on onclick event of anchor tag
提问by Dhananjay Jadhav
I am not able to access javascript function in onclick event of the anchor tag.
我无法在锚标记的 onclick 事件中访问 javascript 函数。
In some cases it is working and in some cases , not.
在某些情况下，它可以工作，而在某些情况下，它不起作用。
Can any body tell why it is happening.
任何人都可以说出为什么会这样。
HTML CODE -
HTML 代码 -
<a href='#' class="btn waves-effect waves-light bg-blue" id="startDeviceScan" onclick="call286Dart123('CollectSysInfo', '3c6c3e33bb65e8331bf4c91c0670492e');" >start device scan </a>
Javascript function :
Javascript 函数：
function call286Dart123(a,b) {
console.log(a + "\t" + b);
}
Fiddle link
小提琴链接
回答by Jonathan Lam
EDITDue to what @Dellirium pointed out in the comment, I've revised my answer to reflect the true issue here. The solution would still work, however.
编辑由于@Dellirium 在评论中指出的内容，我修改了我的答案以反映真正的问题。但是，该解决方案仍然有效。
The problem is that JSFiddle makes the JavaScript run on document load by default. This means that the JS is loaded afterthe HTML, and therefore it wouldn't have been defined at the time the onclickevent was initialized in the HTML.
问题是 JSFiddle 默认让 JavaScript 在文档加载时运行。这意味着 JS在 HTML之后加载，因此onclick在 HTML 中初始化事件时不会定义它。
It seems to be a problem with closures. If you have "Load Type" set to "onload" in JSFiddle, this is what it does internally (you can check the developer console):
这似乎是闭包的问题。如果您在 JSFiddle 中将“加载类型”设置为“onload”，这就是它在内部执行的操作（您可以查看开发者控制台）：
<script type="text/javascript">
//<![CDATA[
window.onload=function(){
function call286Dart123(a,b) {
console.log(a + "\t" + b);
}
}
//]]>
</script>
This means that it is wrappedin in an anonymous event handler to the onloadevent. And since variable (and function) scopes are bound by functions in JavaScript, this makes them not available to the global scope
这意味着它包含在事件的匿名事件处理程序中onload。并且由于变量（和函数）作用域受 JavaScript 中的函数约束，这使得它们不可用于全局作用域
Solution: To fix this, under the "JavaScript" menu, change "Load Type" to "No wrap - in &t;head>". It's that easy =).
解决方案：要解决此问题，请在“JavaScript”菜单下，将“加载类型”更改为“No wrap - in &t;head>”。就这么简单=)。
See this JSFiddle forkas a working example.
请参阅此 JSFiddle fork作为工作示例。
In other words, this would simply change it to (again, you can verify this by visiting the developer console on my JSFiddle):
换句话说，这只会将其更改为（同样，您可以通过访问我的 JSFiddle 上的开发人员控制台来验证这一点）：
<script type="text/javascript">
//<![CDATA[
function call286Dart123(a,b) {
console.log(a + "\t" + b);
}
//]]>
</script>
In which, cal286Darkt123would be defined in the global scope (outside any other functions).
其中，cal286Darkt123将在全局范围内定义（在任何其他函数之外）。
For more info on closures, check the MDN Docs.
有关闭包的更多信息，请查看MDN 文档。
回答by Mike W
Don't use onclick attribute to run JavaScript if you can help it. Instead use event listenersor JQuery onmethod.
如果可以的话，不要使用 onclick 属性来运行 JavaScript。而是在方法上使用事件侦听器或 JQuery 。
<a id="startDeviceScan">Do Something</a>
Vanilla JS:
香草JS：
<script>
var el = document.getElementById("startDeviceScan");
el.addEventListener("click", your_func, false);
</script>
JQuery:
查询：
$( "#startDeviceScan" ).on( "click", your_func(1234));
If you need to fetch an elements attributes for the argument such as the '1234' you can use data- attributesand reference them with JS or JQuery
回答by Ugo T.
Works for me :
为我工作：
<script>
function call286Dart123(a,b) {
console.log(a + "\t" + b);
}
</script>
<a class="btn waves-effect waves-light bg-blue" id="startDeviceScan" onclick="call286Dart123('CollectSysInfo', '3c6c3e33bb65e8331bf4c91c0670492e');" href='#' >start device scan </a>