Почему функция setAttribute не работает в javascript?

Question

Я работаю над проектом django и у меня есть простой встроенный код javascript, и я хочу отключить кнопку и включить еще одну, когда выполняется какое-либо условие. Я попробовал три метода, чтобы сделать это, но когда условие встречается, и я ожидаю выполнить код, никто не работает для меня и ничего не происходит. вот эта часть моего кода:

    {% else %}            
        <script >
            document.getElementById('prevBtn').removeAttribute('disabled');
            document.getElementsByTagName('button')[0].disabled='disabled';
            document.getElementById("nextBtn").setAttribute('disabled','disabled');
        </script>
        <h2 >
             finished
             <h3>
              THANK YOU FOR YOUR TIME <br>
               BYE!

             </h3>
        </h2>
    {% endif %}
<br>

<div><br>
    <button type="submit" id="nextBtn" name="nextBtn">next </button>
<br><br>
    <button type="button" id="prevBtn" name="prevBtn" disabled>previous</button>
</div>

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

РЕДАКТИРОВАТЬ: Для пояснения это шаблонный документ django и полный код, как показано ниже:

{% extends "base.html" %}
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'RuleManager/style.css' %}">
{% block title_html %}
Expert Contract System
{% endblock %}
{% block h1 %}
Expert Contract
{% endblock %}
{% block article_content %}
<form id="expertform" method="post" action="{% url "ExpertSystem:expert_contract" %}" >
{% csrf_token %}

<h2>System message</h2>
<br>
<br>

<h3>{{ question }}</h3>
<br>
<br>

    {% if  question_type == 'Y/N'%}
        <select name="ynselect" >
             <option value="Yes">Yes</option>
             <option value="No">No</option>

        </select>
        <br>

    {% elif question_type == "EXP" %}

        <h3>Your answer</h3>
        <input name="answer" type="text">
        <br>
    {% else %}
        <script >
            document.getElementById('prevBtn').removeAttribute('disabled');
            document.getElementsByTagName('button')[0].disabled='disabled';
            document.getElementById("nextBtn").setAttribute('disabled','disabled');
        </script>
        <h2 >
             finished
             <h3>
              THANK YOU FOR YOUR TIME <br>
               BYE!
             </h3>
        </h2>
    {% endif %}
<br>

<div><br>
    <button type="submit" id="nextBtn" name="nextBtn">next </button>
<br><br>
    <button type="button" id="prevBtn" name="prevBtn" disabled>previous</button>
</div>

</form>

{% endblock %}

Answer 1

Наконец-то я справился с решением после большого количества поисков и тестов, простым способом сделать это, и он помещает все скрипты во внешний файл js с использованием атрибута "defer", например:

<script  >
    var whythisdesc = '{{ whythisquestion }}';
    var howthisdesc = '{{ howthisanswer }}';
</script>
<script defer src="absolute address to javascript file" >
</script>

дополнительно я использую глобальную переменную для доступа к django переменным шаблона во внешнем javascript файле, как описано очень хорошо здесь .

Answer 2

это не работает для вас, потому что скрипт вызывается до того, как html рендерится в DOM. вам нужно переместить ваш скрипт после тегов html

<div><br>
<button type="submit" id="nextBtn" name="nextBtn">next </button>
<br><br>
<button type="button" id="prevBtn" name="prevBtn" disabled>previous</button>
</div>
 <!-- THEN THE SCRIPT -->
<script >
        document.getElementById('prevBtn').removeAttribute('disabled');
        document.getElementsByTagName('button')[0].disabled='disabled';
        document.getElementById("nextBtn").setAttribute('disabled','disabled');
    </script>