Обновление:
- у вас есть ошибка вложения в HTML,
</div> отсутствует, поэтому DOM не содержит форму - check DOM с инструментами разработчика, проверив элементы, и вы увидите, что структура неправильная.
- вы также можете использовать, например, функцию Codepen «Анализировать HTML» на панели HTML, чтобы проверить свой HTML
- класс
<form> - Exercises-form, а селектор .exercises-form (из const exerciseForm = document.querySelector('.exercises-form');), следовательно, не может найти элемент, как CSS класс имена чувствительны к регистру. exerciseForm затем становится null, что вызывает ошибку Uncaught TypeError: Cannot read property 'addEventListener' of null - кнопка удаления по-прежнему не работает. Предлагаю вам попробовать на себе. Используйте инструменты разработчика браузера, особенно инспектор элементов DOM и консоль для интерактивных тестов для ваших запросов селектора (а элемент, который вы выбираете в инспекторе элементов, доступен в консоли как
$0). Есть много руководств в поиске Google.
Дополнительное примечание: я заметил, что document.addEventListener('DOMContentLoaded', () => {... уже есть в верхней части файла. Вы можете поместить туда свой код, нет необходимости в другом DOMContentLoaded прослушивателе событий (хотя это тоже не повредит).
Исходный ответ:
Вы получите
Uncaught TypeError: Cannot read property 'addEventListener' of null
, что означает, что
const delExerciseBtn = document.querySelector('.del-exercise-btn');
не смог найти узел и вернул null.
Вероятная причина: код запускается слишком рано, браузер еще не построил DOM .
Решение: оберните свой код в событие DOMContentLoaded обработчик:
window.addEventListener('DOMContentLoaded', (event) => {
const delExerciseBtn = document.querySelector('.del-exercise-btn');
// ...
});