Функция javascript undefined on onclick event привязанного тега

Question

Я не могу получить доступ к функции javascript в событии onclick тега привязки.

В некоторых случаях это работает, а в некоторых случаях и нет.

Может ли любое тело рассказать, почему это происходит.

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

Fiddle ссылка

Fiddle Link

Answer 1

EDIT Из-за того, что @Dellirium отметил в комментарии, я 're re посмотрел мой ответ, чтобы отразить истинную проблему здесь. Однако решение все равно будет работать.

Проблема в том, что JSFiddle делает JavaScript выполняемым при загрузке документа по умолчанию. Это означает, что JS загружается после HTML, и поэтому он не был бы определен во время инициализации события onclick в HTML.

Это проблема с закрытием. Если у вас есть «Тип нагрузки» установлен на «OnLoad» в JSFiddle, это то, что он делает внутренне (вы можете проверить консоль разработчика):

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

Это означает, что завернутые в в анонимной случае обработчик события onload. Поскольку переменные (и функции) привязаны к функциям в JavaScript, это делает их недоступными для глобальной области.

Решение: Чтобы исправить это, в меню «JavaScript» измените «Тип нагрузки» на «Тип нагрузки», Нет обертывания в головке > ". Это так просто =).

См. this JSFiddle fork в качестве примера работы.

Другими словами, это будет просто изменить его (опять же, вы можете убедиться в этом, посетив консоль разработчика на моем JSFiddle):

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

В которой, cal286Darkt123 будет определен в глобальной области видимости (вне любых других функций).

Для получения дополнительной информации о закрытии, проверьте MDN Docs.

Answer 2

работает для меня:

<script> 
 
    function call286Dart123(a,b) { 
 
\t  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>

Answer 3

Не используйте OnClick атрибут для запуска JavaScript, если вы можете помочь ему. Вместо этого используйте метод event listeners или JQuery on.

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

Vanilla JS:

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

JQuery:

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

Если вам нужно извлекающих элементов атрибутов для аргумента, такие как '1234' вы можете использовать data- attributes и ссылки на них с JS или JQuery

JSBin example