Javascript-форум - Загрузка новых элементов при нажатии на копку “ещё”. Чистый JavaScript

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Загрузка новых элементов при нажатии на копку “ещё”. Чистый JavaScript (https://javascript.ru/forum/misc/82438-zagruzka-novykh-ehlementov-pri-nazhatii-na-kopku-%E2%80%9Ceshhjo%E2%80%9D-chistyjj-javascript.html)

Загрузка новых элементов при нажатии на копку “ещё”. Чистый JavaScript

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

posso,
где ваши попытки?

let data

async function getCountry(){
    let val = document.getElementById('country').value;
    const response = await fetch(`https://api.sampleapis.com/countries/countries?name=${val}`);

    let data1 = await response.json();
    let table = document.querySelector('#table');

    data1.forEach((data2)=>{

        table.innerHTML = '';
        let tr = document.createElement('tr');
        table.appendChild(tr);
       createCell(`<img src=${data2.media.flag} style = "width: 150px" alt="hello">`, tr);
        createCell(`${data2.capital}`, tr);
        createCell(`${data2.name}`, tr);
        createCell(`${data2.phone}`, tr);
    })






}

async function getapi(n) {
    const response = await fetch("https://api.sampleapis.com/countries/countries");
    data = await response.json();


    if(data){
        document.getElementById('spinner').style.display = 'none';
    }


    let notesOnPage = 20 + n;
    let countOfItems = Math.ceil(data.length / notesOnPage);

    let table = document.querySelector('#table');
    let pagination = document.querySelector('#pagination');



    let showPage = (function() {
        let active;

        return function(item) {
            if (active) {
                active.classList.remove('active');
            }
            active = item;

            item.classList.add('active');

            let pageNum = +item.innerHTML;

            let start = (pageNum - 1) * notesOnPage;
            let end = start + notesOnPage;

            let notes = data.slice(start, end);

            table.innerHTML = '';
            for (let note of notes) {
                let tr = document.createElement('tr');
                table.appendChild(tr);
                createCell(`<img src=${note.media.flag} style = "width: 150px" alt="hello">`, tr);
                createCell(note.capital, tr);
                createCell(note.name, tr);
                createCell(note.phone, tr);

            }
        };
    }());

    let items = [];
    for (let i = 1; i <= countOfItems; i++) {
        let li = document.createElement('li');
        li.innerHTML = i;
        pagination.appendChild(li);
        items.push(li);
    }

    showPage(items[0]);

    for (let item of items) {
        item.addEventListener('click', function() {
            showPage(this);
        });
    }

}

function createCell(text, tr) {
    let td = document.createElement('td');
    td.innerHTML = text;
    tr.appendChild(td);
}

кнопка ещё или вывод данных по запросу

Цитата:

Сообщение от posso

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

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            width: 80vm;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin: 0 auto;
        }

        li {
            list-style: decimal;
            flex-basis: 120px;
            font-size: .8em;
            word-wrap:  break-word;
            margin: 0 6px;
        }
    </style>
</head>
<body>
    <ul id="countries"></ul>
    <script>

        const baseURL = "https://api.sampleapis.com/countries/countries";
        const makeСards = data => data.filter(obj => obj.media && obj.media.flag)
        .sort(({name : a},{name : b} ) => a > b ? 1 : a < b ? -1 : 0)
        .map(obj =>
        `<li>
        <h3>${obj.name}</h3>
        <img src=${obj.media.flag} style = "width: 50px" alt="hello">
        </li>`);
        const show = data => {
            let num = 0, delta = 20;
            const cards = makeСards(data);
            const button = document.createElement("button");
            button.textContent = "add countries";
            const add = _ => {
                countries.insertAdjacentHTML("beforeend", cards.slice(num, num += delta).join(""));
                num < cards.length || button.remove()
            }
            add();
            button.addEventListener("click", add);
            countries.after(button)
        }
        fetch(`${baseURL}`)
            .then(resp => resp.json())
            .then(show);
    </script>
</body>
</html>