Как обратиться к выведенному через AJAX запрос элементу массива с картинками?

Question

Есть полученные и отсеянные картинки с API через AJAX, которые мы выводим по первой кнопке. Нужно теперь иметь возможность выводить картинку по второй кнопке в блок ниже по айди записанном в input. AJAX запрос в отдельном файле лежит (отметил в коде). Подойдёт всё от native до промисов или что то актуальнее, не так давно учу JS интересно узнать как это решается!

// script.js
const resultBlock = document.querySelector('#result')
const pageNumberEl = document.querySelector('#page-number')
const clickMeButton = document.querySelector('#click-me')
const clickMeButton2 = document.querySelector('#click-again')
let idNumber = document.querySelector('#id-number')

clickMeButton.addEventListener("click", () => {
  getImages(pageNumberEl.value, onDataReceived);
})


function onDataReceived(data) {
  el = data.slice(0, 10)
  el.forEach(el => {
    const img = document.createElement("img");
    img.src = el.thumbnailUrl;
    document.querySelector('#result').appendChild(img);
  })
}
// server.js

function getImages(pageNumber, successCallback, onImageChoosed) {
  $.ajax(`https://jsonplaceholder.typicode.com/albums/1/photos`, {

    success: function(data) {
      successCallback(data);
    }
  })
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="master.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
</head>

<body>

  <button id="click-me">ClickMe</button>
  <input id="page-number" value="1">
  <div id="result"></div>
  <!-- solo image now -->
  <button id="click-again">ClickAgain</button>
  <input id="id-number" value="">
  <div id="here"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
  <script src="server.js"></script>
  <script src="script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как обратиться к выведенному через AJAX запрос элементу массива с картинками?

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