jQuery добавление новых и новых предметов на клик

Question

У меня есть кнопка для добавления списка моих репозиториев на GitHub. У меня это работает, единственная проблема в том, что с каждым кликом, он добавляет тот же список репо в список. Вот код для функции

<button onclick="loadRepos()" class="btn btn-warning justify-content-center">Load Repos from Github</button>

function loadRepos(){
    let gitHubRequest = new XMLHttpRequest();
    gitHubRequest.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        let gitObject = JSON.parse(this.responseText);
        for (let i = 0; i < gitObject.length; i++){
            let ul = document.getElementById("repositories");
            let li = document.createElement("LI");
            li.className = "list-group-item";
            let a = document.createElement("a");

            li.appendChild(document.createTextNode(gitObject[i].name));
            a.appendChild(li);
            a.setAttribute("href",gitObject[i].html_url);
            ul.appendChild(a);
        }

Как сделать так, чтобы кнопка перестала добавляться после однократного нажатия. Конечная цель состоит в том, что при нажатии на нее отображается список, а при повторном нажатии скрывается список. Я пытался использовать .toggle, но не смог заставить его работать. какие-либо предложения? всем заранее спасибо :) 1009 *

Answer 1

Загрузка каждый раз при нажатии только для того, чтобы скрыть и показать данные, является бесполезной, достаточно просто загрузить данные один раз и использовать событие щелчка, чтобы скрыть и показать эти данные;

function loadRepos(){
    let gitHubRequest = new XMLHttpRequest();

    gitHubRequest.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {
            let gitObject = JSON.parse(this.responseText);
            let ul = document.getElementById("repositories");
            for (let i = 0; i < gitObject.length; i++){

                let li = document.createElement("LI");
                li.className = "list-group-item";
                let a = document.createElement("a");

                li.appendChild(document.createTextNode(gitObject[i].name));
                a.appendChild(li);
                a.setAttribute("href",gitObject[i].html_url);
                ul.appendChild(a);
            }
        }
    }
}

loadRepos();

function toggleRepositories() {
    document.getElementById("repositories").classList.toggle('hidden');
}

HTML :

<button onclick="toggleRepositories()" class="btn btn-warning justify-content-center">Load Repos from Github</button>

CSS:

.hidden {
   visibility: hidden;
}