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

Question

Константин @Redwhaler

JavaScript

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

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <form id="film-form">
        <label for="title">Название:</label><br>
        <input type="text" id="title" name="title"><br>
        <label for="genre">Жанр:</label><br>
        <input type="text" id="genre" name="genre"><br>
        <label for="releaseYear">Год:</label><br>
        <input type="text" id="releaseYear" name="releaseYear"><br>
        <input type="checkbox" id="isWatched" name="isWatched">
        <label for="isWatched">Успели посмотреть?</label><br>
        <input type="submit" value="Submit">
    </form>

    <div id="form-select-del">
        <div id="change-form">
       <input class="NameFilm" placeholder="Название фильма"> 
       <input class="GenreFilm" placeholder="Жанр">
       <input class="YearReleaseFilm" placeholder="Год релиза">
       <select id="city" name="city">
            <option class="option_1" value="" disabled selected>-- Выберите --</option>
            <option class="option_2">Все</option>
            <option class="option_3">Да</option>
            <option class="option_4">Нет</option>
        </select>
        <button class="delAll">Удалить всё</button>
    </div>
    </div>

    <table id="film-table">
        <thead>
            <tr>
                <th>Название</th>
                <th>Жанр</th>
                <th>Год</th>
                <th>Успели посмотреть?</th>
                <th>Действие</th>
            </tr>
        </thead>
        <tbody id="film-tbody">
            <!-- Rows will be inserted here -->
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

const isWatched = document.querySelector('#city');

isWatched.addEventListener('change', async (event) => {
 
  const target = event.target.value;
  
  const GET = await fetch(`https://sb-film.сс/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);
      console.log(sort)
      
      const filmTableBody = document.getElementById("film-tbody");
      filmTableBody.innerHTML = '';
      
      sort.forEach((film, index) => {
      let Filter = document.createElement("tr");
    Filter.innerHTML = `
      <td>${film.title}</td>
      <td>${film.genre}</td>
      <td>${film.releaseYear}</td>
      <td>${film.isWatched ? "Да" : "Нет"}</td>
    `;
    filmTableBody.append(Filter);
     
})});

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

Вернее, она срабатывает, но на странице происходит автообновление и значения записываются старые, не отфильтрованные.

Вопрос задан 8 часов назад
89 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Яндекс Практикум

Фронтенд-разработчик расширенный

13 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript + ИИ

11 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

5 комментариев

Константин @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();

Написано 7 часов назад

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

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

Написано 7 часов назад

Константин @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() 
})

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

Написано 7 часов назад

Константин @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() 
})

Написано 7 часов назад

Пума Тайланд @opium

Рад что сам докопался с фильтром! С удалением похоже та же история: после фильтра у новых строк не проставляется dataset.id, поэтому id получается NaN и DELETE улетает на /films/NaN. А "Удалить всё" смотри отдельно по консоли/Network, там баг явно не в этом.

Написано 6 часов назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как сделать редактируемыми поля Жанр, Год и Успели посмотреть?
- 2 подписчика
- 06 авг.
- 249 просмотров
1

ответ
JavaScript

Простой
Как удалить элемент из LocalStorage?
- 1 подписчик
- 05 авг.
- 153 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как выводить изображения в 2 или в 3 колонки в строке в зависимости от пропорций изображений?
- 1 подписчик
- 20 июл.
- 242 просмотра
1

ответ
JavaScript

+2 ещё

Сложный
Как заставить библиотеку docs js нарисовать бордер при переносе таблицы?
- 2 подписчика
- 10 июл.
- 240 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как подстраивать размер канваса под размер страницы?
- 1 подписчик
- 01 июл.
- 191 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 277 просмотров
1

ответ
JavaScript

Средний
Значение переменной в строку или сохранение в VK?
- 1 подписчик
- 10 июн.
- 195 просмотров
2

ответа
JavaScript

+1 ещё

Сложный
Как сделать логику post запроса покупки товара, если 1 товара не хватает — отменить покупку?
- 2 подписчика
- 10 июн.
- 281 просмотр
2

ответа
JavaScript

Средний
Как правильно вывести данные из функции в див?
- 2 подписчика
- 08 июн.
- 213 просмотров
3

ответа
Показать ещё Загружается…

event.preventDefault(); не помогает в моем случае, страница даже с ним обновляется
isWatched - это что? в примере нет объявления
Froggyweb, const isWatched = document.querySelector('#city')

Answer 1 · 2026-08-11 16:09:53

select сам по себе ничего не сабмитит и страницу не перезагружает — у change нет дефолтного action, так что preventDefault тут ни при чём.

судя по описанию (фильтр сработал, а потом вписались старые данные) дело не в перезагрузке, а в повторном рендере: где-то ещё есть код, который после твоего filterByPrefix заново рисует film-tbody непрофильтрованным X — например обработчик submit у film-form. проверь гонку: оба куска пишут в один tbody, и остаётся тот, кто отработал последним.

p.s. в fetch домен `sb-film.сс` — там кириллическая "с", не латинская c.

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

Войдите, чтобы написать ответ

Минуточку внимания

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