javascript - DOMContentLoaded の window.addEventListener が正しく機能しない - JavaScript

Question

これは私の最初の JavaScript スニペットです。次の問題に遭遇します。Django Rest Framework データでシリアル化されたデータを読み込んでから、質問のリストとページネーション バーをレンダリングしようとしています。likeQuestion、PaginationListenerおよびSortingListener関数もあります。

以下のスニペットでは、fetch 関数内で likeQuestion、PaginationListener、SortingListener 関数を実行しています。それは機能しますが、再帰的であることが判明したため、クリックするたびに複数の http リクエストが 2 倍になります (実際には SortingListener 関数のみがこのように動作しますが、PaginationListener は驚くほど動作しません)。

また、fetch 関数から 3 つの関数すべてを実行しようとしました。うまくいきません:要素を取得しようとすると、html コレクションの長さがゼロになります。でやってみましたwindow.addEventListener('DOMContentLoaded', (e) => {})。それでもうまくいきません。

fetch 関数の外では、 でのみ機能しsetTimeoutます。ただし、この場合、PaginationListener は最初のクリックに対してのみ機能します。また、タイムアウトはあまり良い決定ではないようです。

スムーズに動作するようにコードを変更するにはどうすればよいですか?

const url = document.getElementById('question-list').dataset.url
getQuestionList(url)


// Ask.index page loading
function getQuestionList(url) {
    const questionList = document.getElementById('question-list')
    fetch(url).then(response => response.json()).then(json => {

        // Questions List loading
        questionList.innerHTML = ''
        for(const question of json.results){
            date = new Date(question.date)
            const el = document.createElement('div')
            el.classList.add('row', 'justify-content-center', 'my-3')
            el.innerHTML = '<div>Question HTML</div>'
            const likeButton = el.querySelector('.like-btn')
            if(question.like){
                likeButton.classList.add('active')
            }
            questionList.appendChild(el)
        }

        // Pagination Links loading
        const pagination = document.getElementById('pagination')
        pagination.innerHTML = ''
        if (json.links.first){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.first + '">Первая</a></li>'
        } else {
            pagination.innerHTML += '<li class="page-item disabled"><a class="page-link text-primary" href="#" disabled>Первая</a></li>'
        }
        if (json.links.second_previous){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.second_previous + '">' + (json.current - 2) + '</a></li>'
        }
        if (json.links.previous){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.previous + '">' + (json.current - 1) + '</a></li>'
        }
        pagination.innerHTML += '<li class="page-item active"><span class="page-link bg-primary">' + json.current + '</span></li>'
        if (json.links.next){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.next + '">' + (json.current + 1) + '</a></li>'
        }
        if (json.links.second_next){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.second_next + '">' + (json.current + 2) + '</a></li>'
        }
        if (json.links.last){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.last + '">Последняя</a></li>'
        } else {
            pagination.innerHTML += '<li class="page-item disabled"><a class="page-link text-primary" href="#" disabled>Последняя</a></li>'
        }

        likeQuestion()
        PaginationListener()
        SortingListener()
    })
}


function likeQuestion() {
    const button = document.getElementsByClassName('like-btn')
    Array.from(button).forEach(element => {
        element.addEventListener('click', () => {
            const url = element.dataset.url
            const request = new XMLHttpRequest()
            request.responseType = 'json'
            request.open('GET', url)
            request.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
            request.send()
            request.onload = function () {
                if (this.status >= 200 && this.status < 400) {
                    if (this.response.auth) {
                        window.location = this.response.auth
                    } else {
                        element.querySelector('.like_count').textContent = this.response.like_count
                        if (this.response.add) {
                            element.classList.add('active')
                        } else {
                            element.classList.remove('active')
                        }
                    }
                } else {
                    console.log('Did not get anything')
                }
            }
            request.onerror = function () {
                console.log('Connection error');
            }
        })
    })
}

function PaginationListener() {
    const pagesLinks = document.getElementsByClassName('page-link')
    Array.from(pagesLinks).forEach(element => {
        element.addEventListener('click', (event) => {
            const url = element.getAttribute('href')
            if (url) {
                getQuestionList(url)
                window.scrollTo({top: 0, behavior: 'smooth'})
            }
            event.preventDefault()
        }, false)
    })
}


function SortingListener(){
    const questionList = document.getElementById('question-list')
    const sortingField = document.getElementById('id_order_by')
    sortingField.addEventListener('change', (event)=>{
        const url = questionList.dataset.url + '?order_by=' + event.target.value
        getQuestionList(url)
    })
}