-2

Имеется задачка Задание 5. Написать код приложения, интерфейс которого состоит из двух input и кнопки. В input можно ввести любое число. o Заголовок первого input — «номер страницы». o Заголовок второго input — «лимит». o Заголовок кнопки — «запрос». При клике на кнопку происходит следующее: o Если число в первом input не попадает в диапазон от 1 до 10 или не является числом — выводить ниже текст «Номер страницы вне диапазона от 1 до 10»; o Если число во втором input не попадает в диапазон от 1 до 10 или не является числом — выводить ниже текст «Лимит вне диапазона от 1 до 10»; o Если и первый, и второй input не в диапазонах или не являются числами — выводить ниже текст «Номер страницы и лимит вне диапазона от 1 до 10»; o Если числа попадают в диапазон от 1 до 10 — сделать запрос по URL https://picsum.photos/v2/list?page=1&limit=10, где GET-параметр page — это число из первого input, а GET-параметр limit — это введённое число второго input. Пример: если пользователь ввёл 5 и 7, то запрос будет вида https://picsum.photos/v2/list?page=5&limit=7. После получения данных вывести список картинок на экран. Если пользователь перезагрузил страницу, то ему должны показываться картинки из последнего успешно выполненного запроса (использовать localStorage).

Вот мой код на задачку:

<!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);
        }
    </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>
    <!-- <div id="result"></div> -->
    <img id="result" />

</body>

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

    // Вешаем обработчик на кнопку для запроса
    btn.addEventListener('click', () => {
        const value1 = document.getElementById('page').value;
        const value2 = document.getElementById('limit').value;
        let s = document.getElementById('result');
        s.textContent = '';
        if (!(value1 >= 1 && value1 <= 10)) {
            s.textContent = 'Номер страницы вне диапазона от 1 до 10';
            return;
        }
        elif(!(value2 >= 1 && value2 <= 10)) {
            s.textContent = 'Лимит вне диапазона от 1 до 10';
            return;
        }
        elif(!(value1 >= 1 && value1 <= 10 && value2 >= 1 && value2 <= 10)) {
            s.textContent = 'Номер страницы и лимит вне диапазона от 1 до 10';
            return;
        } else {
            fetch(`https://picsum.photos/v2/list?page=${value1}&limit=${value2}`)
                .then((response) => {
                    document.getElementById('result').src = response.url;
                });
            console.log(result);
        }
    });
</script>

</html>

Не могу понять почему выпадает ошибка в браузере -- Uncaught SyntaxError: Unexpected token '{' введите сюда описание изображения

Из-за этого не могу решить данное задание дальше по условию.

0

1 ответ 1

3

В js нет конструкции elif. Есть else if

<!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);
        }
    </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>
    <!-- <div id="result"></div> -->
    <img id="result" />

</body>

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

    // Вешаем обработчик на кнопку для запроса
    btn.addEventListener('click', () => {
        const value1 = document.getElementById('page').value;
        const value2 = document.getElementById('limit').value;
        let s = document.getElementById('result');
        s.textContent = '';
        if (!(value1 >= 1 && value1 <= 10)) {
            s.textContent = 'Номер страницы вне диапазона от 1 до 10';
            return;
        }
        else if(!(value2 >= 1 && value2 <= 10)) {
            s.textContent = 'Лимит вне диапазона от 1 до 10';
            return;
        }
        else if(!(value1 >= 1 && value1 <= 10 && value2 >= 1 && value2 <= 10)) {
            s.textContent = 'Номер страницы и лимит вне диапазона от 1 до 10';
            return;
        } else {
            fetch(`https://picsum.photos/v2/list?page=${value1}&limit=${value2}`)
                .then((response) => {
                    document.getElementById('result').src = response.url;
                });
            console.log(result);
        }
    });
</script>

</html>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.