<a class="page-link" data-page="{{ answer_list.previous_page_number }}"
               href="javascript:void(0)">이전</a>

답변페이징을 하는데 위 코드처럼 자바스크립트를 이용하면 페이지 숫자 버튼을 눌러도 페이지 이동이 이루어지지 않고

<a class="page-link" href="?page{{ page_number }}">{{ page_number }}</a>

이거처럼 곧바로 연결시켜주면 똑바로 작동되는데 이유가 궁금합니다

밑은 question_detail.html전부입니다

{% extends 'base.html' %}
{% load pybo_filter %}
{% block content %}
<div class="container my-3">
    <!-- 오류 메시지 표시 -->
    {% if messages %}
    <div class="alert alert-danger my-3" role="alert">
        {% for message in messages %}
            <strong>{{ message.tags }}</strong>
            <ul><li>{{ message.message }}</li></ul>
        {% endfor %}
    </div>
    {% endif %}
    <!-- 오류 메시지 표시 end -->
    <!-- 질문 -->
    <h2 class="border-bottom py-2">{{ question.subject }}</h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" >{{ question.content|mark }}</div>
            <div class="d-flex justify-content-end">
                {% if question.modify_date %}
                <div class="badge bg-light text-dark p-2 text-start mx-3">
                    <div class="mb-2">modified at</div>
                    <div>{{ question.modify_date }}</div>
                </div>
                {% endif %}
                <div class="badge bg-light text-dark p-2 text-start">
                    <div class="mb-2">{{ question.author.username }}</div>
                    <div>{{ question.create_date }}</div>
                </div>
            </div>
            <div class="my-3">
                <a href="javascript:void(0)" data-uri="{% url 'pybo:question_vote' question.id %}"
                   class="recommend btn btn-sm btn-outline-secondary">추천
                <span class="badge rounded-pill bg-success">{{question.voter.count}}</span>
                </a>
                {% if request.user == question.author %}
                <a href="{% url 'pybo:question_modify' question.id %}"
                   class="btn btn-sm btn-outline-secondary">수정</a>
                <a href="javascript:void(0)" class="delete btn btn-sm btn-outline-secondary"
                   data-uri="{% url 'pybo:question_delete' question.id %}">삭제</a>
                {% endif %}
            </div>
        </div>
    </div>
    <!-- 답변 -->
    <h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
    {% for answer in answer_list %}
    <a id="answer_{{ answer.id }}"></a>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" >{{ answer.content|mark }}</div>
            <div class="d-flex justify-content-end">
                {% if answer.modify_date %}
                <div class="badge bg-light text-dark p-2 text-start mx-3">
                    <div class="mb-2">modified at</div>
                    <div>{{ answer.modify_date }}</div>
                </div>
                {% endif %}
                <div class="badge bg-light text-dark p-2 text-start">
                    <div class="mb-2">{{ answer.author.username }}</div>
                    <div>{{ answer.create_date }}</div>
                </div>
            </div>
            <div class="my-3">
                <a href="javascript:void(0)" data-uri="{% url 'pybo:answer_vote' answer.id  %}"
               class="recommend btn btn-sm btn-outline-secondary"> 추천
                <span class="badge rounded-pill bg-success">{{answer.voter.count}}</span>
                </a>
                {% if request.user == answer.author %}
                <a href="{% url 'pybo:answer_modify' answer.id %}"
                   class="btn btn-sm btn-outline-secondary">수정</a>
                <a href="#" class="delete btn btn-sm btn-outline-secondary"
                   data-uri="{% url 'pybo:answer_delete' answer.id %}">삭제</a>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
    <!-- 페이징처리 시작 -->
    <ul class="pagination justify-content-center">
        <!-- 이전 페이지 -->
        {% if answer_list.has_previous %}
        <li class="page-item">
            <a class="page-link" data-page="{{ answer_list.previous_page_number }}"
               href="javascript:void(0)">이전</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">이전</a>
        </li>
        {% endif %}
        <!-- 처음으로 이동 -->
        {% if 5 < answer_list.number %}
        <li class="page-item" aria-current="page">
            <a class="page-link" href="?page=1">1</a>
        </li>
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">...</a>
        </li>
        {% endif %}
        <!-- 처음으로 이동 end-->
        <!-- 페이지 리스트 -->
        {% for page_number in answer_list.paginator.page_range %}
        {% if page_number >= answer_list.number|add:-5 and page_number <= answer_list.number|add:5 %}
        {% if page_number == answer_list.number %}
        <li class="page-item active" aria-current="page">
            <a class="page-link"
               href="?page{{ page_number }}">{{ page_number }}</a>
        </li>
        {% else %}
        <li class="page-item">
            <a class="page-link" data-page="{{ page_number }}"
               href="?page={{ page_number }}">{{ page_number }}</a>
        </li>
        {% endif %}
        {% endif  %}
        {% endfor %}
        <!-- 끝으로 이동 -->
        {% if answer_list.paginator.num_pages > answer_list.number|add:5 %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">...</a>
        </li>
        <li class="page-item" aria-current="page">
            <a class="page-link" href="?page={{ answer_list.paginator.num_pages }}">{{ question_list.paginator.num_pages }}</a>
        </li>
        {% endif %}
        <!-- 끝으로 이동 end-->
        <!-- 다음페이지 -->
        {% if answer_list.has_next %}
        <li class="page-item">
            <a class="page-link" data-page="{{ answer_list.next_page_number }}"
               href="javascript:void(0)">다음</a>
        </li>
        {% else %}
        <li class="page-item disabled">
            <a class="page-link" tabindex="-1" aria-disabled="true" href="#">다음</a>
        </li>
        {% endif %}
    </ul>
    <!-- 페이징처리 끝 -->
    <!-- 답변 등록 -->
    <form action="{% url 'pybo:answer_create' question.id %}" method="post" class="my-3">
        {% csrf_token %}
        <!-- 오류표시 Start -->
        {% if form.errors %}
        <div class="alert alert-danger" role="alert">
            {% for field in form %}
            {% if field.errors %}
            <div>
                <strong>{{ field.label }}</strong>
                {{ field.errors }}
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endif %}
        <!-- 오류표시 End -->
        <div class="mb-3">
            <label for="content" class="form-label">답변내용</label>
            <textarea {% if not user.is_authenticated %}disabled{% endif %}
                      name="content" id="content" class="form-control" rows="10"></textarea>
        </div>
        <input type="submit" value="답변등록" class="btn btn-primary">
    </form>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript">
    const delete_elements = document.getElementsByClassName("delete");
    Array.from(delete_elements).forEach(function(element) {
        element.addEventListener('click', function() {
            if(confirm("정말로 삭제하시겠습니까?")) {
                location.href = this.dataset.uri;
            };
        });
    });
    const recommend_elements = document.getElementsByClassName("recommend");
    Array.from(recommend_elements).forEach(function(element) {
        element.addEventListener('click', function() {
            if(confirm("정말로 추천하시겠습니까?")) {
                location.href = this.dataset.uri;
            };
        });
    });
    const page_elements = document.getElementsByClassName("page-link");
    Array.from(page_elements).forEach(function(element) {
        element.addEventListener('click', function() {
            document.getElementById('page').value = this.dataset.page;
            document.getElementById('searchForm').submit();
        });
    });
</script>
{% endblock %}