Комментарии пользователя Константин

Почему при выборе нужного Option происходит автообновление страницы и фильтрация не срабатывает?

Константин @Redwhaler Автор вопроса

Ой, ошибся
тут проблема

const delAll = document.querySelector("#form-select-del")

delAll.addEventListener('click', async(event) => {
    const target = event.target.textContent;
     if(target === 'Удалить всё') {
      const GET = await fetch(`https://sb-film.cc/films`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });
     }
      
 
  renderTable() 
})

Написано 11 авг.

Почему при выборе нужного Option происходит автообновление страницы и фильтрация не срабатывает?

Константин @Redwhaler Автор вопроса

Вот из-за этого кода не работает

const del = document.querySelector("#film-table")

del.addEventListener('click', async(event) => {
    const target = event.target;
      
      const row = target.closest('tr');
      const id = Number(row.dataset.id);

      if(target.textContent ==="Удалить") {
    const GET = await fetch(`https://sb-film.cc/films/${id}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });
}
  renderTable() 
})

Только что именно ему не нравится я пока что не пойму

Написано 11 авг.

Почему при выборе нужного Option происходит автообновление страницы и фильтрация не срабатывает?

Константин @Redwhaler Автор вопроса

Всё.
Я разобрался сам в ошибке))) Вы были правы.

Написано 11 авг.

Почему при выборе нужного Option происходит автообновление страницы и фильтрация не срабатывает?

Константин @Redwhaler Автор вопроса

Вот весь код, ничего если честно пока не пойму

function handleFormSubmit(e) {
  e.preventDefault();

  const title = document.getElementById("title").value;
  const genre = document.getElementById("genre").value;
  const releaseYear = document.getElementById("releaseYear").value;
  const isWatched = document.getElementById("isWatched").checked;

  const film = {
    title: title,
    genre: genre,
    releaseYear: releaseYear,
    isWatched: isWatched,
  };
 
  addFilm(film);
}

async function addFilm(film) {
  // const films = JSON.parse(localStorage.getItem("films")) || [];
  // films.push(film);
  // localStorage.setItem("films", JSON.stringify(films));

  // console.log(film);
  await fetch("https://sb-film.cc/films", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    },
    body: JSON.stringify(film),
  });
  renderTable();
}

async function renderTable() {
  // const films = JSON.parse(localStorage.getItem("films")) || [];
  const filmsResponse = await fetch("https://sb-film.cc/films", {
    headers: {
      email: "ovikdevil@gmail.com",
    },
  });
  const films = await filmsResponse.json();
  
  const filmTableBody = document.getElementById("film-tbody");

  // Clear table body first
  filmTableBody.innerHTML = "";

  // Then add new rows
  films.forEach((film, index) => {
    const row = document.createElement("tr");
    row.dataset.id = film.id;
    row.innerHTML = `
      <td>${film.title}</td>
      <td>${film.genre}</td>
      <td>${film.releaseYear}</td>
      <td>${film.isWatched ? "Да" : "Нет"}</td>
      <td >
      <button class="delete">${"Удалить"}</button>
      </td>
    `;
    filmTableBody.appendChild(row);
  });
}

const NameFilm = document.querySelector('.NameFilm')
const GenreFilm = document.querySelector('.GenreFilm')
const YearReleaseFilm = document.querySelector('.YearReleaseFilm')
const isWatched = document.querySelector('#city')



NameFilm.addEventListener('input', async (event) => {
  const target = event.target.value;
  
  const GET = await fetch(`https://sb-film.cc/films`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });

     let X = await GET.json();  
 
      
    
    function filterByPrefix(X, target) {
      const lowerQuery = target.toLowerCase();
  
        return X.filter(item => 
        item.title.toLowerCase().startsWith(lowerQuery)
      );
      } 
    
     let sort = filterByPrefix(X, target);

      const filmTableBody = document.getElementById("film-tbody");
      filmTableBody.innerHTML = '';
      
      sort.forEach((film, index) => {
      let FilterRow = document.createElement("tr");
    FilterRow.innerHTML = `
      <td>${film.title}</td>
      <td>${film.genre}</td>
      <td>${film.releaseYear}</td>
      <td>${film.isWatched ? "Да" : "Нет"}</td>
      <td >
      <button class="delete">${"Удалить"}</button>
      </td>
    `;
    filmTableBody.appendChild(FilterRow);
     
})});

GenreFilm.addEventListener('input', async (event) => {
  const target = event.target.value;
  
  const GET = await fetch(`https://sb-film.cc/films`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });

     let X = await GET.json();  
 
       
    
    function filterByPrefix(X, target) {
      const lowerQuery = target.toLowerCase();
  
        return X.filter(item => 
        item.genre.toLowerCase().startsWith(lowerQuery)
      );
      } 
    
     let sort = filterByPrefix(X , target);
      
      const filmTableBody = document.getElementById("film-tbody");
      filmTableBody.innerHTML = '';
      
      sort.forEach((film, index) => {
      let FilterRow = document.createElement("tr");
    FilterRow.innerHTML = `
      <td>${film.title}</td>
      <td>${film.genre}</td>
      <td>${film.releaseYear}</td>
      <td>${film.isWatched ? "Да" : "Нет"}</td>
      <td >
      <button class="delete">${"Удалить"}</button>
      </td>
    `;
    filmTableBody.appendChild(FilterRow);
     
})});

YearReleaseFilm.addEventListener('input', async (event) => {
  const target = event.target.value;
  
  const GET = await fetch(`https://sb-film.cc/films`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });

     let X = await GET.json();  
 
       
    
    function filterByPrefix(X, target) {
      const lowerQuery = target.toLowerCase();
  
        return X.filter(item => 
        item.releaseYear.toLowerCase().startsWith(lowerQuery)
      );
      } 
    
     let sort = filterByPrefix(X , target);

      
      const filmTableBody = document.getElementById("film-tbody");
      filmTableBody.innerHTML = '';
      
      sort.forEach((film, index) => {
      let FilterRow = document.createElement("tr");
    FilterRow.innerHTML = `
      <td>${film.title}</td>
      <td>${film.genre}</td>
      <td>${film.releaseYear}</td>
      <td>${film.isWatched ? "Да" : "Нет"}</td>
      <td >
      <button class="delete">${"Удалить"}</button>
      </td>
    `;
    filmTableBody.appendChild(FilterRow);
     
})});



isWatched.addEventListener('change', async (event) => {
 event.preventDefault();
  const target = event.target.value;
  
  const GET = await fetch(`https://sb-film.cc/films`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });

     let X = await GET.json();  
 
      
    
    function filterByPrefix(X, target) {
        if(target === 'Да') {
        return X.filter(item => 
        item.isWatched == true
      )};
        if(target ==='Нет') {
          return X.filter(item => 
        item.isWatched == false
      )};
        if(target === 'Все'){ 
          return X
        }
      } 
    
     let sort = filterByPrefix(X , target);
      
      const filmTableBody = document.getElementById("film-tbody");
      filmTableBody.innerHTML = '';
      
      sort.forEach((film, index) => {
      let FilterRow = document.createElement("tr");
    FilterRow.innerHTML = `
      <td>${film.title}</td>
      <td>${film.genre}</td>
      <td>${film.releaseYear}</td>
      <td>${film.isWatched ? "Да" : "Нет"}</td>
      <td >
      <button class="delete">${"Удалить"}</button>
      </td>
    `;
    filmTableBody.appendChild(FilterRow);
     
}) });




 
const del = document.querySelector("#film-table")

del.addEventListener('click', async(event) => {
    const target = event.target;
      
      const row = target.closest('tr');
      const id = Number(row.dataset.id);

      if(target.textContent ==="Удалить") {
    const GET = await fetch(`https://sb-film.cc/films/${id}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });
}
  renderTable() 
})

const delAll = document.querySelector("#form-select-del")

delAll.addEventListener('click', async(event) => {
    const target = event.target.textContent;
     if(target === 'Удалить всё') {
      const GET = await fetch(`https://sb-film.cc/films`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
      email: "ovikdevil@gmail.com",
    }   
  });
     }
      
 
  renderTable() 
})



document
  .getElementById("film-form")
  .addEventListener("submit", handleFormSubmit);

// Display films on load
renderTable();

Написано 11 авг.

Почему при выборе нужного Option происходит автообновление страницы и фильтрация не срабатывает?

Константин @Redwhaler Автор вопроса

Froggyweb, const isWatched = document.querySelector('#city')

Написано 11 авг.

Почему при выборе нужного Option происходит автообновление страницы и фильтрация не срабатывает?

Константин @Redwhaler Автор вопроса

event.preventDefault(); не помогает в моем случае, страница даже с ним обновляется

Написано 11 авг.

Как сделать редактируемыми поля Жанр, Год и Успели посмотреть?

Константин @Redwhaler Автор вопроса

Михаил Р., вообще ничего не получается.
Вот, что мне лишь удалось сделать

tbody.addEventListener('click', e => {
        const target = e.target;
         
        const SpanGenre = document.querySelector('#SpanGenre');
        const InputGenre = document.querySelector('#InputGenre');
        const Edit = document.querySelector('.Edit');
        const Update = document.querySelector('.Update');

         
         
        
    if (target.classList.contains('Edit')) {
        Edit.style.display = "none";
        Update.style.display = "inline-block";
        SpanGenre.style.display = 'none';
        InputGenre.style.display = 'inline-block';

    } else if (target.classList.contains('Update')) {
        SpanGenre.textContent = InputGenre.value; 
        Edit.style.display = "inline-block";
        Update.style.display = "none";
        SpanGenre.style.display = 'inline-block';
        InputGenre.style.display = 'none';
                 
    }
});

Я не понимаю, как сделать так, чтобы при клику на конкретную кнопку Редактировать выбиралось КОНКРЕТНОЕ поле.

Сейчас же, если у меня будет 3 добавленных поля с 3-мя кнопками, то каждая кнопка по нажатию будет активировать первое поле.

То есть я даже словесно не могу объяснить, что не получается.

По сути НИЧЕГО не получается.

Написано 06 авг.

Как удалить элемент из LocalStorage?

Константин @Redwhaler Автор вопроса

Спасибо!

Написано 05 авг.

Чему тут равен this?

Константин @Redwhaler Автор вопроса

Вадим, ну это свойство являющееся объектом внутри объекта...

Написано более трёх лет назад

Чему тут равен this?

Константин @Redwhaler Автор вопроса

vue вообще не нравится. React в миллион раз красивее, логичнее и т.д.
Но для работы вынужден этот вью учить...

Там на подобных мелочах не спотыкался.

Написано более трёх лет назад

Чему тут равен this?

Константин @Redwhaler Автор вопроса

в данном случае this равен объекту methods?

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

Борис Алексеев, ок

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

Борис Алексеев, мне как-то раз сказали, что нужно как можно БОЛЬШЕ кода. То я его выкладывал слишком в миниатюрных порциях, то в слишком больших.
Буду искать середину.

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, вы мне не ровня, чтобы пытаться троллить меня. Возьмите планку пониже, которая хоть как-то коррелирует с вашим уровнем.

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, видимо вам действительно НЕЧЕМ заняться. причем по жизни

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, вы в кб этот текст успели измерить?

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, вы слишком ничтожны, чтобы я отвечал на ваши комментарии. Впредь я их игнорирую оставляя только жалобу на каждый, который не соответствует тематике заданного вопроса.

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, какой МОЙ вопрос нарушает правила? Слово "Почему?"
Если так, то по-вашему убрав это слово и заменив его на другое смысл моего обращения сюда изменится?

Вы очень тупой, раз не видите СУТЬ. А суть в том, что мне нужна помощь и НЕ ВАЖНО какие слова используются для её ПОИСКА.

Я уже давно осознал, что у вас вместо мозга говно, которое вы пытаетесь высрать через написание бессмысленных говнястых комментариев на этом ресурсе.

Но мне ваше говно тут не нужно, высирайте его на своих близких, друзей, детей и т.д. Плодите его где угодно, но не в моих вопросах.

Я вам не дружок с подворотни, чтобы засирать мои вопросы и пытаться неуместно, тупо и юродиво "троллить" их автора.

Или это какие-то комплексы, зажимы и так вы их компенсируете? Что ж, тогда вам к психологу, мог бы помочь с поиском, но нет, мне это не интересно.

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, исправил, не "спасибо", а "ПОЖАЛУЙСТА"

Написано более трёх лет назад

Коряво работает пагинация, почему?

Константин @Redwhaler Автор вопроса

0xD34F, видимо у вас с головой действительно беда. Благо я не санитар.
19 минут назад был опубликован мой вопрос, через 5 минут после его публикации вы высрали бессмысленное "ПОЖАЛУЙСТА".

Вы не в себе? Не видите очевидного?

Написано более трёх лет назад

Войдите на сайт