Javascript 函数在锚标记的 onclick 事件上未定义

Question

我无法在锚标记的 onclick 事件中访问 javascript 函数。

在某些情况下，它可以工作，而在某些情况下，则不能。

任何人都可以说出为什么会这样吗？

HTML 代码 -

 <a  href='#'  class="btn waves-effect waves-light bg-blue" id="startDeviceScan" onclick="call286Dart123('CollectSysInfo', '3c6c3e33bb65e8331bf4c91c0670492e');" >start device scan </a>

Javascript 函数：

 function call286Dart123(a,b) {
    console.log(a + "\t" + b);
}

小提琴链接

小提琴链接

原文由 Dhananjay Jadhav 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑 由于@Dellirium 在评论中指出的内容，我修改了我的答案以反映此处的真实问题。但是，该解决方案仍然有效。

问题是 JSFiddle 默认情况下使 JavaScript 在文档加载时运行。这意味着 JS 在 HTML 之后 加载，因此在 onclick 事件在 HTML 中初始化时它不会被定义。

好像是 闭包 的问题。如果你在 JSFiddle 中将“Load Type”设置为“onload”，这就是它在内部所做的（你可以检查开发者控制台）：

 <script type="text/javascript">
    //<![CDATA[
        window.onload=function(){
            function call286Dart123(a,b) {
                console.log(a + "\t" + b);
            }
        }
    //]]>
</script>

这意味着它被 包装 在 onload 事件的匿名事件处理程序中。并且由于变量（和函数）作用域受 JavaScript 中函数的约束，这使得它们对全局作用域不可用

解决方案：要解决此问题，请在“JavaScript”菜单下，将“加载类型”更改为“No wrap - in &t;head>”。就这么简单 =)。

请参阅 此 JSFiddle 分支 作为工作示例。

换句话说，这只是将其更改为（同样，您可以通过访问我的 JSFiddle 上的开发人员控制台来验证这一点）：

 <script type="text/javascript">
    //<![CDATA[
        function call286Dart123(a,b) {
            console.log(a + "\t" + b);
        }
    //]]>
</script>

其中， cal286Darkt123 将在全局范围内定义（在任何其他函数之外）。

有关闭包的更多信息，请查看 MDN 文档。

原文由 Jonathan Lam 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果可以的话，不要使用 onclick 属性来运行 JavaScript。而是 在 方法上使用 事件侦听器 或 JQuery。

 <a id="startDeviceScan">Do Something</a>

香草JS：

 <script>
   var el = document.getElementById("startDeviceScan");
   el.addEventListener("click", your_func, false);
</script>

查询：

 $( "#startDeviceScan" ).on( "click", your_func(1234));

如果您需要获取参数的元素属性，例如“1234”，您可以使用 数据属性 并使用 JS 或 JQuery 引用它们

JSBin 示例

原文由 user115014 发布，翻译遵循 CC BY-SA 3.0 许可协议