Самопроизвольная загрузка после нажатия на кнопку. Где ошибка?

Question

Поля ввода остаются пустыми. Нажимаем кнопку - начинают загружаться картинки. Но когда вводи от 1 до 10 страницу и лимит, то код отрабатывает. Загружает картинки с указанной страницы в поле НОМЕР СТРАНИЦА и то количество, что указано в поле ЛИМИТ. Прошу сильно не пенять. Я только учусь.

ВОТ САМ КОД:

<!DOCTYPE html>
<html lang="ru">


<head>
    <meta charset="UTF-8">
    <style>
        .btn {
            padding: 0;
            background-color: transparent;
            border: none;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            box-shadow: none;
            cursor: pointer;
            margin: 5px 10px;
            padding: 10px 15px;
            border-radius: 1px;
            font-size: 12px;
            line-height: 15px;
            text-transform: uppercase;
            color: white;
            background: #315efb;
            transition: 0.3s;
        }
        
        .btn:hover {
            box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .3);
            transform: scale(1.05);
        }
        
        figure img {
            width: 500px;
            height: 300px;
        }
    </style>
    <title>С5.6_Практика 5 рабочая</title>
</head>


<body>

    <fieldset>
        <legend>Задание 5-рабочая</legend>
        <p> <label>Номер страницы</label> <br />
            <input id="page" class="text" size="20"> </p>
        <p> <label>Лимит</label> <br />
            <input id="limit" class="text" size="20"> </p>
        <p> <button class="btn j-btn-request">Запрос</button> </p>
    </fieldset>
    <figure>
        <p id="result"></p>
        <div id="placehere"></div>
    </figure>

</body>

<script>
    // Ищем кнопку, по нажатии на которую будет запрос
    const btn = document.querySelector('.j-btn-request');

    // Вешаем обработчик на кнопку для запроса
    btn.addEventListener('click', () => {

        const page = parseInt(document.getElementById('page').value, 10);
        const limit = parseInt(document.getElementById('limit').value, 10);

        let s = document.getElementById("result");
        s.textContent = 'вне диапазона';
        let diap = true;
        if ((Object.is(page, NaN) === true) ||
            (page < 1 || page > 10)
        ) {
            diap = false;
            s.textContent = "page (Страница) " + s.textContent;
        }
        if ((Object.is(limit, NaN) === true) ||
            (limit < 1 || limit > 10)
        ) {
            diap = false;
            s.textContent = "limit (Лимит) " + s.textContent;
        }
        if (diap) {
            s.textContent = 'page and limit ok';
        }
        fetch(`https://picsum.photos/v2/list?page=${page}&limit=${limit}`)
            .then((response) => {
                response.json().then(function(data) {
                    // console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        console.log(data[i].download_url);

                        var elem = document.createElement("img");
                        elem.setAttribute("src", data[i].download_url);

                        document.getElementById("placehere").appendChild(elem);
                    }
                });
            });
    });
</script>

</html>

БЛОГ НА HUSL

Самопроизвольная загрузка после нажатия на кнопку. Где ошибка?

Ответы (0 шт):