Не (всегда) работает innerHTML

Столкнулся с проблемой, что не всегда срабатывает innerHTML в js.

    var form_result = document.getElementById("form_result");
    $("#upload_task").click(function (e) {
        form_result.innerHTML="";
        e.preventDefault();
    if (checkForm(document.forms["task_form"])) {
        let x=$("#task_form")[0];
        var formData = new FormData(x);
        formData.append("action", "upload-task")
        $.ajax({
            url: '/tasks/managetasks',
            method: 'post',
            dataType: 'json',
            headers: {'X-CSRFToken': document.getElementsByName("csrfmiddlewaretoken")[0].value},
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data["ok"]);
                document.getElementById("task_form").reset();
                $("#message")[0].innerText="Задание "+data["ok"]+" загружено";
                $("#message").fadeIn();
                $("#message").fadeOut(5000);
            },
            error: function (data) {
                try {
                    data = JSON.parse(data["responseText"]);
                    // console.log(data);
                    let errors = "";
                    for (i in data["error"]) {
                        console.log(data["error"][i]);
                        errors += '<p class="lead" style="font-size: 1em;">' + data["error"][i] + '</p>\n';
                    }
                    form_result.innerHTML = errors;
                }
                catch{
                    form_result.innerHTML = '<p class="lead" style="font-size: 1em;">Ошибка подключения к серверу</p>'; 
                }
            }
        })
    }
    else {
        form_result.innerHTML = '<p class="lead" style="font-size: 1em;">Заполните все обязательные поля</p>';
    }
});

В самом начале функции строка form_result.innerHTML=""; не срабатывает, т.е. form_result не очищается перед запросом, хотя дальше по функции innerHTML работает как надо.
Самое интересное, что если установить точку остановки и прогнать функцию пошагово, то все работает как надо.

Полный код страницы:

{% extends "base.html" %}
{% load static %}
<!-- https://bootstrap-4.ru/docs/4.0/components/navs/#javascript-behavior -->
<!-- https://bootstrap-4.ru/docs/4.0/components/dropdowns/ -->
<!-- https://bootstrap-4.ru/docs/4.0/components/modal/ -->
<!-- https://getbootstrap.com/docs/4.0/components/card/ -->
{% block head%}
<link rel="stylesheet" href="{% static 'css/index.css'%}">
<link rel="stylesheet" href="{% static 'css/join.css'%}">
<link rel="stylesheet" href="{% static 'tasks/css/bootstrap-datetimepicker.min.css'%}">
<style>
.message{
    position: absolute;
    top: 13.5em;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    border: 2px solid forestgreen;
    border-radius: 5px;
    min-height: 3em;
    width: 18.8em;
    max-width: 40em;
    display: none;
}
.message_text{
    margin-left: auto;
    margin-right: auto;
}
</style>
<!-- <link rel="stylesheet" href="{% static 'card_style.css'%}"> -->
{% endblock head %}
{% block title %}Хакатон | Загрузка решения{% endblock title %}
{% block content %}
    {% include "header.html" %}
    <div class="base-container d-flex w-100 h-100 p-3 mx-auto flex-column"></div>
    <main role="main" id="main" class="inner cover">
        <div class="base-container d-flex w-100 h-100 p-3 mx-auto flex-column">
            <h1 class=" display-4">Загрузка задания</h1>
            <div class="message" id="message"><p class="message_text" id="message_text">hello</p></div>
            <form method="post" class="form mt-5" enctype="multipart/form-data" id="task_form">
                  {% csrf_token %}
                  {{form.title}}
                  {{form.task}}
                  {{form.task_file}}
                  {{form.cost}}
                  <div style="position: relative;">
                    {{form.deadline}}
                  </div>
                  <!-- <button type=" submit" class="btn btn-primary btn-blue mt-3">Загрузка</button> -->
                  <input type="button" value="Загрузка" class="btn btn-primary btn-blue mt-3" id="upload_task">
            </form>
            <div id="form_result"></div>
        </div>
    </main>
</div>
{% endblock content %}
{%block scripts%}
<!-- <script src="{% static 'get_tasks.js' %}"></script> -->
<script src="{%static 'tasks/js/moment-with-locales.min.js'%}"></script>
<script src="{%static 'tasks/js/bootstrap-datetimepicker.min.js'%}"></script>
<script src="{%static 'js/check-form.js'%}"></script>
<script type="text/javascript">
    $(function () {
      $('#datetimepicker2').datetimepicker({
        locale: 'ru'
      });
    });
  </script>
  <script>
    var form_result = document.getElementById("form_result");
    $("#upload_task").click(function (e) {
        form_result.innerHTML="";
        console.log("form_result"+form_result.innerHTML);
        alert(form_result.innerHTML);
        e.preventDefault();
    if (checkForm(document.forms["task_form"])) {
        let x=$("#task_form")[0];
        var formData = new FormData(x);
        formData.append("action", "upload-task")
        $.ajax({
            url: '/tasks/managetasks',
            method: 'post',
            dataType: 'json',
            headers: {'X-CSRFToken': document.getElementsByName("csrfmiddlewaretoken")[0].value},
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data["ok"]);
                document.getElementById("task_form").reset();
                $("#message")[0].innerText="Задание "+data["ok"]+" загружено";
                $("#message").fadeIn();
                $("#message").fadeOut(5000);
            },
            error: function (data) {
                try {
                    data = JSON.parse(data["responseText"]);
                    // console.log(data);
                    let errors = "";
                    for (i in data["error"]) {
                        console.log(data["error"][i]);
                        errors += '<p class="lead" style="font-size: 1em;">' + data["error"][i] + '</p>\n';
                    }
                    form_result.innerHTML = errors;
                }
                catch{
                    form_result.innerHTML = '<p class="lead" style="font-size: 1em;">Ошибка подключения к серверу</p>'; 
                }
            }
        })
    }
    else {
        form_result.innerHTML = '<p class="lead" style="font-size: 1em;">Заполните все обязательные поля</p>';
    }
});
</script>
{%endblock scripts%}