Calling javascript function inside HTML tag

Question

I have the following.

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

And I have a Javascript file

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

But when I click on "click me", the alert is not being fired. It says "hello" is not defined. I remove document.ready, and it works.

Is this because "hello" is not being defined until the entire document is ready, but when the above "anchor" tag is being rendered, it can't find the function?

Is there any way I can get this to work?

• I have to call javascript function from the html tag via ugly "onclick"
• I need to keep my JS inside document.ready (there are other parts I need)

Answer 1

You can also use the HREF attribute with javascript: keyword in Anchor Tag to call a JavaScript function:

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