Uncaught ReferenceError: <function> is not defined at HTMLButtonElement.onclick [duplicate]

Question

I have created my problem on JSFiddle at https://jsfiddle.net/kgw0x2ng/5/. The code is as follows

HTML CODE

<div class="loading">Loading&#8230;</div> 
<button type="submit" onClick="hideButton()">Hide</button>
<button type="submit" onClick="showButton()">Show</button>

JS CODE

function hideButton(){
   $(".loading").hide();
}
function showButton(){
   $(".loading").show();
}

I am showing a spinner and I would like the spinner to hide when I click on the "Hide" button. I am getting the following error :

Uncaught ReferenceError: showButton is not defined
    at HTMLButtonElement.onclick (VM282:180)
onclick @ VM282:180
VM282:179  

Uncaught ReferenceError: hideButton is not defined
    at HTMLButtonElement.onclick (VM282:179)
onclick @ VM282:179.

Can someone please suggest a solution?

Thanks

Sachin

Your issue is not javascript related. It is of Jsfiddle. As you use $(...) you are using JQuery, but you never referenced Jquery in your code. In the top left of your javascript code editor there is a dropdown, select into FRAMEWORKS & EXTENSIONS the JQUERY, by instance JQuery 3.4.1. Then your code works as your expected. — elpezganzo
– elpezganzo, Commented Dec 5, 2020 at 2:28

Ambo100 · Accepted Answer · 2019-04-19 14:35:19Z

3

Place your script inside the body tag

<body>
  // Rest of html
  <script>
  function hideButton() {
    $(".loading").hide();
  }
function showButton() {
  $(".loading").show();
}
</script> 
< /body>

If you check this JSFIDDLE and click on javascript, you will see the load Type body is selected

edited Apr 19, 2019 at 14:35

Ambo100

1,1913 gold badges15 silver badges30 bronze badges

answered Dec 26, 2016 at 5:02

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandeep Kushwah Over a year ago

This is not the exact solution but it clicked the solution to me... so upvoted.

Arindam · Accepted Answer · 2017-05-25 14:58:11Z

-4

Same Problem I had... I was writing all the script in a seperate file and was adding it through tag into the end of the HTML file after body tag. After moving the the tag inside the body tag it works fine. before :

</body>
<script>require('../script/viewLog.js')</script>

after :

<script>require('../script/viewLog.js')</script>
</body>

answered May 25, 2017 at 14:58

Arindam

73310 silver badges19 bronze badges

Collectives™ on Stack Overflow

Uncaught ReferenceError: <function> is not defined at HTMLButtonElement.onclick [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related