Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2021, 22:40
Новичок на форуме
Отправить личное сообщение для posso Посмотреть профиль Найти все сообщения от posso
 
Регистрация: 06.05.2021
Сообщений: 2

Загрузка новых элементов при нажатии на копку “ещё”. Чистый JavaScript
Мне задали задание по практике. Я совсем голову сломал с заданием. Задание звучит так: "При нажатии на кнопку показать еще к существующему списку требуется дорисовать следующие 20 стран и т.д. При этом после того, как страны для вывода закончатся кнопку необходимо скрыть или удалить." Помогите, пожалуйста, сделать. Задание нужно сделать на чистом javascript.
Ответить с цитированием
  #2 (permalink)  
Старый 06.05.2021, 23:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,790

posso,
где ваши попытки?
Ответить с цитированием
  #3 (permalink)  
Старый 06.05.2021, 23:26
Новичок на форуме
Отправить личное сообщение для posso Посмотреть профиль Найти все сообщения от posso
 
Регистрация: 06.05.2021
Сообщений: 2

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);
}
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2021, 01:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,790

кнопка ещё или вывод данных по запросу
Сообщение от 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>

Последний раз редактировалось рони, 07.05.2021 в 09:52.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает код при добавление новых элементов dima85 jQuery 12 26.09.2015 12:27
JavaScript, Выделить все значения в multiselect при нажатии submit VBeregovoy Общие вопросы Javascript 2 06.02.2013 18:09
Действие при нажатии на строку D7na Events/DOM/Window 10 08.01.2012 09:47
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34
Добавление элементов при нажатии frolvict Общие вопросы Javascript 16 06.04.2010 18:56