Cannot read properties of null (reading 'classList') Как исправить?

Question

[3aaaaa]

"use strict";
// ------------------modal__Sing-in
const overlay = document.querySelector(".overlay");
const singIn = document.querySelector(".header__nav__sign-in");
const authorization = document.querySelector(".authorization");
function singInClick() {
inputName.value = "";
inputPassword.value = "";
authorization.classList.remove("modal-hidden");
overlay.classList.remove("hidden__overlay");
headerNav.classList.add("hidden");
overlay.addEventListener("click", function () {
authorization.classList.add("modal-hidden");
overlay.classList.add("hidden__overlay");
});
};
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && !authorization.classList.contains("modal-hidden")) {
authorization.classList.add("modal-hidden");
overlay.classList.add("hidden-overlay");
}
});
HTMl тут тоже ругается

Answer 1

[otdameskapizm]

Если 10 строчка - это строчка headerNav.classList.add("hidden");, то, возможно, проблема в том, что вы не забрали это элемент посредством document.querySelector()
Ну или его просто нет в вашем коде, так как в куске, который вы прикрепили, его нет

Может вы перепутали его с singIn

Comments

[3aaaaa]

overlay.classList.remove("hidden__overlay"); - 10 строчка

А ХТМЛ ругается именно на отмеченний мной кусок кода. kПонятия не имею почему. Возможно из-за singInClick
hidden__overlay класс в коде есть.

[otdameskapizm]

3aaaaa, У вас там hidden-overlay через дефис в HTML, а в коде overlay.classList.remove("hidden__overlay");

[zxf]

otdameskapizm, в данном отрезке кода это не вызвало бы ошибки

[zxf]

3aaaaa, расставьте логи и найдите, где .querySelector(...) отрабатывает некорректно

[otdameskapizm]

zxf , не вызвало бы - мы же удаляем класс, которого нет, но тем не менее

Answer 2

[v3shin]

Текст ошибки: вы пытаетесь получить свойство classList у null. Найдите в коде где это вызывается и добавьте проверку на null.