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

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);
}

小提琴链接

小提琴链接

Answer 1

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

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

封闭似乎是一个问题。 如果你在JSFiddle中将“加载类型”设置为“onload”，这就是它在内部的作用（你可以检查开发者控制台）：

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

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

解决方案 ：要解决此问题，请在“JavaScript”菜单下将“Load Type”更改为“No wrap-in＆t; head>”。 这很容易=）。

将此JSFiddle fork视为一个工作示例。

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

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

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

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

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>

JQuery的：

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

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

JSBin的例子

Answer 3

适合我：

 <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>