Второй щелчок не распознан для кнопки ввода

Question

Я строю программу, используя колбу и HTML. У меня есть кнопка ввода в такой форме:

<input type="submit" id="submit_button" name="my_button" value="Submit" onclick="loading()">

Когда я нажимаю кнопку в первый раз, моя функция loading() успешно запускает:

<script type="text/javascript">
function loading(){
    document.getElementById("loading").innerHTML = "[Loading]"
}
</script>

и изменяет содержимоеиз #loading div, чтобы сказать "[Загрузка]". Однако, если я нажимаю кнопку еще раз, я получаю следующую ошибку javascript:

Uncaught TypeError: loading is not a function
at HTMLInputElement.onclick

Остальное действие кнопки выполняется (например, что должно произойти, когда я нажимаю «Отправить»), ноФункция onclick не работает.

Однако, если я подожду некоторое время и затем нажму кнопку, функция onclick снова срабатывает.

Почему onclick не срабатывает, когда я нажимаю кнопку после однократного нажатия на нее, если я не жду минуты или более?

Я включил полныйкод ниже для справки:

{% extends "base.html" %}
{% block page_content %}

<h1 style="display: inline; margin-right: 20px;">{{ title }}</h1>

<h2 id="loading">Placeholder</h2>

<div class="container button_row">

    <form id="form_main" action="/get/all" method="post">

        <input type="submit" id="submit_button" name="my_button" value="Submit" onclick="loading()">

    </form>

</div>

<h2 class="header_margin">{{display_type}}</h2>

{% for item in display %}

    <p><b>{{item}}</p>

{% endfor %}


<!-- Makes the loading div appear until the page refreshes -->
<script type="text/javascript">
    function loading(load_what){
        document.getElementById("loading").style.display = "inline";
        document.getElementById("loading").innerHTML = "[Loading]"
    }
</script>

{% endblock %}

и css:

#loading {
    display: none; /* Start out hidden always */
    color: #007BFF;
}