Uncaught ReferenceError: <функция> не определена в HTMLButtonElement.onclick

Я создал свою проблему на JSFiddle в https://jsfiddle.net/kgw0x2ng/5/. Код выглядит следующим образом

HTML-код

<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();
}

Я показываю spinner, и я бы хотел, чтобы spinner спрятался, когда я нажимаю кнопку "Скрыть". Я получаю следующую ошибку:

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.

Кто-нибудь может предложить решение?

Спасибо

Сэчин

Ответ 1

Поместите ваш script в тег body

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

Если вы проверите этот JSFIDDLE и нажмете на javascript, вы увидите, что выбрано load Type body

Ответ 2

То же самое, что у меня было... Я писал весь script в отдельном файле и добавлял его через тег в конец HTML файла после тега body. После перемещения тега внутри тега тела он отлично работает. до:

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

после:

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