Колба Модал не работает, когда стол пуст

Question

Я пытаюсь заставить этот модал работать. У меня есть простое веб-приложение с флягой с базой данных SQLite и некоторый код JavaScript для добавления новых строк в таблицу с модальным режимом.

Все работает нормально, если в таблице больше нет строки. Если таблица пуста, я больше не могу открыть модал. Если есть хотя бы одна строка, модал работает нормально и открывается правильно.

Я загрузил код здесь: https://jsfiddle.net/bq4seprt

Я попытался отладить ошибку и получить следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.btn.<computed>.onclick

в строке:

modal.style.display = "block";

Answer 1

Несколько замечаний из вашего кода

Вам не нужно условное выражение {% for row in rows %}, чтобы создать новый мод для каждого добавляемого элемента. С условным условием {% for row in rows %} у вас нет модального класса для выбора, когда таблица пуста, поэтому модальное значение равно нулю.

Что вам нужно сделать, это удалить условный оператор для вашего текущего модального значения, получитьДанные из вашей формы, а затем добавление новых данных для вас sqlite. У вас есть кнопка закрытия, чтобы установить модальное отображение на none, а затем модальная кнопка, чтобы изменить отображение на блокировку. Вы используете колбу, поэтому я предполагаю, что у вас уже есть код для получения данных из формы и добавления их в базу данных sqlite. Все, что вам нужно для использования javascript - это показывать и скрывать модальные

. Также для классов, которые существуют в вашем коде только один раз, вам не нужен querySelectorAll, вместо этого используйте querySelector