Почему не вызывается функция из консоли браузера?

175

05 июля 2018, 03:20

Пишу нижеследующий код. При загрузке страницы в консоль попадает 111.

Но если я в консоле пишу test(222);, то test is not defined.

$(document).ready(function() { 
  test(111); 
 
  function test(number) { 
    console.log(number) 
  }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div onclick="test(111)">Start</div>

Answer 1

Код в консоли браузера выполняется в глобальной области видимости. Функция test - локальная, видна только внутри анонимного обработчика события ready и в глобальной области видимости недоступна.

как сделать глобальной

function test(number) { 
  console.log(number) 
} 
 
$(document).ready(function() { 
  test(111); 
}); 
 
test(222);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div onclick="test(333)">Start</div>

или

$(document).ready(function() { 
  window.test = function(number) { 
    console.log(number) 
  } 
 
  test(111); 
}); 
setTimeout(function(){test(222);}, 200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div onclick="test(333)">Start</div>

Вы можете оставить ваши функции спрятанными внутри анонимной функции, но тогда назначать их в качестве обработчиков событий надо в коде, а не в атрибутах html.

$(document).ready(function() { 
  function test(number) { 
    console.log(number) 
  } 
 
  test(111); 
   
  $(".clickable").click(function(){ 
    test($(this).data("value")); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="clickable" data-value="333">Start</div> 
<div class="clickable" data-value="444">Finish</div>