Вывести список картинок на экран, используя запрос по URL
Стоит задача:
Если числа попадают в диапазон от 1 до 10 — сделать запрос по URL https://picsum.photos/v2/list?page=1&limit=10, где GET-параметр
page— это число из первого input, а GET-параметрlimit— это введённое число второго input.
Я написал код, но изображение не выводится.
Кроме того, дело в том что каждый input имеет свой вывод текста в случае ошибки, и мне удалось это сделать. Но так же если в двух input значение не валидны то выводится третий текст ("Номер страницы и лимит вне диапазона от 1 до 10"), вот это сообщение не получается вывести.
Подскажите пожалуйста что я делаю не так?
const btn = document.querySelector('.j-btn');
btn.addEventListener('click', () => {
const page = +document.getElementById('page').value;
const limit = +document.getElementById('limit').value;
let s = document.getElementById('j-result');
s.textContent = '';
if (!(page >= 1 && page <= 10)) {
s.textContent = 'Номер страницы вне диапазона от 1 до 10';
return;
}
if (!(limit >= 1 && limit <= 10)) {
s.textContent = 'Лимит вне диапазона от 1 до 10';
return;
}
if (!(limit >= 1 && limit <= 10 && page >= 1 && page <= 10)) {
s.textContent = 'Номер страницы и лимит вне диапазона от 1 до 10';
return;
}
// Делаем запрос за данными
fetch(`https://picsum.photos/v2/list?page=${page}&limit=${limit}`)
.then((response) => {
document.getElementById('result').src = response.url;
});
});.result {
display: flex;
flex-wrap: wrap;
width: 500px;
}
.card {
width: 200px;
margin: 20px;
}
.card-image {
display: block;
width: 200px;
height: 150px;
}
.btn {
padding: 0;
background-color: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
cursor: pointer;
border-radius: 5px;
margin: 5px 10px;
padding: 10px 15px;
font-size: 12px;
line-height: 15px;
text-transform: uppercase;
color: white;
background: #307570;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, 0.3);
transform: scale(1.05);
}
legend {
max-width: 115px;
margin: 0 auto;
padding: 0 13px;
}
fieldset {
border-radius: 8px;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task-4</title>
</head>
<body>
<fieldset>
<legend>Размер картинки</legend>
<p> <label>Номер страницы</label> <br />
<input id="page" class="text" size="20" placeholder="Введите число от 1 до 10">
</p>
<p> <label>Лимит</label> <br />
<input id="limit" class="text" size="20" placeholder="Введите число от 1 до 10">
</p>
<p> <button class="btn j-btn">Запрос</button> </p>
</fieldset>
<div id="j-result"></div>
<img id="result" />
<script src="task4.js"></script>
</body>
</html>Ответы (2 шт):
Автор решения: stylok
→ Ссылка
Во-первых, вашему fetch не хватает redirect: 'follow', хотя вы и сами могли бы посмореть, что в сетевых запросах в ответ вам приходит "пустышка", а во вторых, обслуживайте запрос правильно.
var requestOptions = {
redirect: 'follow'
};
fetch(`https://picsum.photos/v2/list?page=${page}&limit=${limit}`, requestOptions)
.then(response => response.json())
.then(result => {
console.log(result);
// здесь и стартуйте вашу функцию
})
.catch(error => console.log('error', error));
Автор решения: Andrei
→ Ссылка
Можно вот так решить вашу задачу:
const btn = document.querySelector('.j-btn');
btn.addEventListener('click', () => {
const page = +document.getElementById('page').value;
const limit = +document.getElementById('limit').value;
let s = document.getElementById('j-result');
s.textContent = '';
if (!(page >= 1 && page <= 10)) {
s.textContent = 'Номер страницы вне диапазона от 1 до 10';
return;
}
if (!(limit >= 1 && limit <= 10)) {
s.textContent = 'Лимит вне диапазона от 1 до 10';
return;
}
if (!(limit >= 1 && limit <= 10 && page >= 1 && page <= 10)) {
s.textContent = 'Номер страницы и лимит вне диапазона от 1 до 10';
return;
}
// Делаем запрос за данными
fetch(`https://picsum.photos/v2/list?page=${page}&limit=${limit}`)
.then((response) => {
return response.json();
})
.then((data) =>{
let res = document.querySelector('#j-result');
for (item of data){
let img = document.createElement('IMG');
img.setAttribute('src', item.download_url);
img.setAttribute('alt', item.author);
img.setAttribute('width', '200');
res.append(img);
}
});
});.result {
display: flex;
flex-wrap: wrap;
width: 500px;
}
.card {
width: 200px;
margin: 20px;
}
.card-image {
display: block;
width: 200px;
height: 150px;
}
.btn {
padding: 0;
background-color: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
cursor: pointer;
border-radius: 5px;
margin: 5px 10px;
padding: 10px 15px;
font-size: 12px;
line-height: 15px;
text-transform: uppercase;
color: white;
background: #307570;
transition: 0.3s;
}
.btn:hover {
box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, 0.3);
transform: scale(1.05);
}
legend {
max-width: 115px;
margin: 0 auto;
padding: 0 13px;
}
fieldset {
border-radius: 8px;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task-4</title>
</head>
<body>
<fieldset>
<legend>Размер картинки</legend>
<p> <label>Номер страницы</label> <br />
<input id="page" class="text" size="20" placeholder="Введите число от 1 до 10">
</p>
<p> <label>Лимит</label> <br />
<input id="limit" class="text" size="20" placeholder="Введите число от 1 до 10">
</p>
<p> <button class="btn j-btn">Запрос</button> </p>
</fieldset>
<div id="j-result"></div>
<script src="task4.js"></script>
</body>
</html>