在錨標記的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>