Why is onclick not able to find my function

Question

I have a form and inside it there is a button.

<form>
  <button type="button" onclick="hello(); return false;">Hi</button>
</form>

I'm trying to call hello which is in my javascript file but I'm getting the error:

(index):43 Uncaught ReferenceError: hello is not defined at HTMLButtonElement.onclick ((index):43)

I'm using JSFiddle. My JavaScript is located in the JavaScript panel.

Why am I getting this error and how do I fix it (in JavaScript)?

Well, where do you define your hello function? A [mcve] would be nice — j08691, Oct 09 '19 at 20:18
@j08691 I'm using JSFiddle. My JavaScript is located in the JavaScript panel. — template boy, Oct 09 '19 at 20:19
jsFiddle by default loads your JS into a window.onload handler. That aside, you should always post a [mcve] here. See the difference when you pick the right option: https://jsfiddle.net/j08691/47q91zuv/? — j08691, Oct 09 '19 at 20:20
In your fiddle I clicked the JS dropdown menu and changed the load type from on load to no wrap/head. — j08691, Oct 09 '19 at 20:23

score -1 · Answer 1 · answered Oct 09 '19 at 20:28

Place your javascript function inside body tag, it resolves the issue

<!DOCTYPE html>
<html>
<body>

<form>
  <button type="button" onclick="hello(); return false;">
  Hi
  </button>
</form>

<script>
function hello() {
    alert("Hello");
}
</script>

</body>
</html>

Why is onclick not able to find my function

1 Answers1