Вызов функции javascript внутри тега HTML

У меня есть следующее.

<a href="#" onclick="hello()">click me</a>

И у меня есть файл Javascript

$(document).ready(function() {
  function hello() {
    alert('hi');
  }
});

Но когда я нажимаю "кликнуть меня", предупреждение не запускается. В нем говорится, что "привет" не определено. Я удаляю document.ready, и он работает.

Это потому, что "привет" не определяется до тех пор, пока весь документ не будет готов, но когда отображается вышеописанный тэг "anchor", он не может найти функцию?

Есть ли способ заставить это работать?

Мне нужно вызвать функцию javascript из тега html через уродливый "onclick"
Мне нужно сохранить JS внутри document.ready(есть другие части, которые мне нужны)

Ответ 1

Объявление функции hello() не входит в глобальную область, поэтому вызов из HTML, который пытается вызвать его в глобальной области, не может найти его. Вы можете исправить это, перемещая вашу функцию hello() в глобальную область:

function hello() {
    alert('hi');
}

$(document).ready(function() {
});

или объявив его в глобальной области:

$(document).ready(function() {
  window.hello = function() {
    alert('hi');
  }
});

Ответ 2

Вы также можете использовать атрибут HREF с ключевым словом javascript: в теге Anchor для вызова функции JavaScript:

<a href="javascript:hello()">click me</a>

Ответ 3

Причина приветствия undefined заключается в том, что Hello() существует только в контексте обратного вызова DomReady. Вам нужно определить Hello() в глобальном контексте.

Ответ 4

Удалить "hello()" из вызова $(document).ready().
Вызвать "hello()" в обратном вызове события "click".

<a href="#" id="say_hello">click me</a>

<script type="text/javascript">
$(document).ready(function() {
    $('#say_hello').click(function() {
        hello();
    });
});

function hello() {
    alert('hi');
}
</script>