Uncaught ReferenceError: <function> is not defined at HTMLButtonElement.onclick
<p>I have created my problem on JSFiddle at <a href="https://jsfiddle.net/kgw0x2ng/5/" rel="noreferrer">https://jsfiddle.net/kgw0x2ng/5/</a>. The code is as follows</p>

<p><strong>HTML CODE</strong> </p>

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

<p><strong>JS CODE</strong></p>

<pre><code>function hideButton(){
   $(".loading").hide();
}
function showButton(){
   $(".loading").show();
}
</code></pre>

<p>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 :</p>

<pre><code>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.
</code></pre>

<p>Can someone please suggest a solution? </p>

<p>Thanks</p>

<p>Sachin</p>