Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2023, 12:09
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Учебный проект - проблема с карточками
Всех приветствую! Не уверена, что мой вопрос 100% относится к данному разделу, но пока решила написать сюда, так как уже который день бьюсь с кодом.
Проблема касается закрытия карточек. Например, когда я пишу adam (или что-то еще) в поиске, нажимаю на Search- открывается карточка с пользователем adam (ну или с тем пользователем, которого ввела). Затем я пишу еще что-то в поиске, опять нажимаю Search и ожидаю, что первая карточка закроется. Но нет- вторая карточка просто открывается под первой, а первая никуда не девается. Есть только предположения, что например можно не добавлять wrapper каждый раз в mainEl, а просто сделать контейнером для карточек. Но так как я совсем новичок, я не могу это сделать технически. Вариант полного очищения, как я поняла не подходит в случае, так как в mainEl есть другие элементы.
Подскажите пожалуйста в каком месте кода и что именно мне надо поменять, чтоб добиться нужного поведения. Самой кажется, что надо что-то менять в функции if (response.ok), но никак не получается сделать то, что надо. А вот сам код:

const mainEl = document.querySelector(".main");
const wrapper = document.createElement("div");

const formEl = document.createElement("form");
formEl.addEventListener("submit", async (e) => {
  e.preventDefault();
  const inputsValue = Object.fromEntries(new FormData(e.target));
  const response = await fetch(`
https://api.github.com/users/${inputsValue.name}`);

  if (response.ok) {
    const data = await response.json();
    wrapper.appendChild(createProfileEl(data));
    mainEl.appendChild(wrapper);

    inputEl.value = "";
  } else {
    alert("The user is not found");
  }
});

const inputEl = document.createElement("input");
inputEl.classList.add("search-input");
inputEl.setAttribute("name", "name");

const searchButtonEl = document.createElement("button");
searchButtonEl.classList.add("search-button");
searchButtonEl.setAttribute("type", "submit");
searchButtonEl.innerHTML = "Search";

formEl.appendChild(inputEl);
formEl.appendChild(searchButtonEl);
mainEl.appendChild(formEl);

function createProfileEl(profileData) {
  const element = document.createElement("div");
  element.classList.add("profile");

  element.innerHTML = `
  <img class="search-image" src=${profileData.avatar_url}></img> 
  <p class="search-text"><span>Name: </span>${profileData.name || "No info"}</p>
    <p class="search-text"><span>City: </span>${
      profileData.location || "No info"
    }</p>
    <p class="search-text"><span>About: </span>${
      profileData.bio || "No info"
    }</p>
  `;

  element.appendChild(createDeleteBtnEl());
  return element;
}

function createDeleteBtnEl() {
  const element = document.createElement("button");
  element.classList.add("close-button");
  element.innerText = "Close";
  element.addEventListener("click", (e) => {
    wrapper.innerHTML = "";
  });
  return element;
}

Скрины: https://drive.google.com/drive/u/0/f...4cFy4ScxfBsvbg

Последний раз редактировалось Alina Sarbu, 17.01.2023 в 12:13.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2023, 12:26
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Попробуйте после строки 12
wraper.remove();
wraper.textContent = '';


Зы Вместо appendChild можно просто append
https://developer.mozilla.org/ru/doc...Element/append

Последний раз редактировалось voraa, 17.01.2023 в 12:33.
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2023, 12:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alina Sarbu,
if (response.ok) {
    const data = await response.json();
*!*
    wrapper.innerHTML = "";
*/!*
    wrapper.appendChild(createProfileEl(data));
    mainEl.appendChild(wrapper);
    inputEl.value = "";
  }
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2023, 09:59
Новичок на форуме
Отправить личное сообщение для IamAnton Посмотреть профиль Найти все сообщения от IamAnton
 
Регистрация: 25.12.2022
Сообщений: 9

Alina Sarbu,
Я бы если я новичок, писал комментарии в коде. Быстрей становится понятно и тебе и другим.
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2023, 10:18
Новичок на форуме
Отправить личное сообщение для IamAnton Посмотреть профиль Найти все сообщения от IamAnton
 
Регистрация: 25.12.2022
Сообщений: 9

Alina Sarbu,
Я бы не стал создавать элемент wrapper во второй строке, а сделал бы это после if (response.ok)....
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2023, 11:36
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Сообщение от voraa Посмотреть сообщение
Попробуйте после строки 12
wraper.remove();
wraper.textContent = '';


Зы Вместо appendChild можно просто append
https://developer.mozilla.org/ru/doc...Element/append
Огромное вам спасибо за помощь! Применила оба совета, как с wrapper'ом так и сократила appendChild, написала просто append и теперь все работает как надо.
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2023, 11:41
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Сообщение от рони Посмотреть сообщение
Alina Sarbu,
if (response.ok) {
    const data = await response.json();
*!*
    wrapper.innerHTML = "";
*/!*
    wrapper.appendChild(createProfileEl(data));
    mainEl.appendChild(wrapper);
    inputEl.value = "";
  }
И вам огромное спасибо за ответ, тоже работает как надо.
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2023, 11:45
Интересующийся
Отправить личное сообщение для Alina Sarbu Посмотреть профиль Найти все сообщения от Alina Sarbu
 
Регистрация: 28.04.2020
Сообщений: 11

Сообщение от IamAnton Посмотреть сообщение
Alina Sarbu,
Я бы не стал создавать элемент wrapper во второй строке, а сделал бы это после if (response.ok)....
Насчет комментов да, вы правы, надо будет хоть какие-то вставлять в последующих проектах учебных. А вот насчет wrapper, написала его после if (response.ok) и в таком случае у меня ломается кнопка Close, т.е. когда хочу закрыть карточку Close просто не реагирует. Потому решила оставить как и было - объявить переменную с wrapper сверху
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2023, 12:00
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Вообще трудно понять что такое wraper, и когда он должен появляться? Если он всегда должен быть на странице, то почему его не разместить сразу, а не после считывания информации о карточке? И зачем его тогда снова присоединять к main?
Если он должен быть только вместе с карточкой, то почему он не убирается при закрытии карточки, а остается пустым на странице?
Ответить с цитированием
  #10 (permalink)  
Старый 18.01.2023, 12:08
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Alina Sarbu
и в таком случае у меня ломается кнопка Close, т.е. когда хочу закрыть карточку Close просто не реагирует.
Сделать так
function createDeleteBtnEl(element) {
  const button = document.createElement("button");
  button.classList.add("close-button");
  button.innerText = "Close";
  button.addEventListener("click", (e) => {
    element.remove()
  });
  element.append(button);
}

А стр 50
element.appendChild(createDeleteBtnEl());

Переписать так
createDeleteBtnEl(element);
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема при изменение типа в Store на ajax Ambassador ExtJS 2 06.09.2018 23:59
Парсинг HTML -> DOM в нормальных браузерах (таки проблема) FINoM Events/DOM/Window 9 19.01.2014 17:38
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47