Cannot read properties of null (reading 'classList')
JS только учусь и поэтому иногда вообще не понимаю что происходит.. Помогите понять где и как исправлять ошибку, пожалуйста. Ошибки таковы
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at FormValidator._toggleSaveButton (FormValidator.js:11:30)
at FormValidator._trackEventListener (FormValidator.js:40:10)
at FormValidator.enableValidation (FormValidator.js:50:10)
at index.js:172:15
at NodeList.forEach (<anonymous>)
at enableValidation (index.js:162:12)
at index.js:175:1
Код
FormValidator.js
export class FormValidator {
constructor(formElement, enableValidationConfig) {
this._formElement = formElement;
this._enableValidationConfig = enableValidationConfig;
this._inputList = Array.from(this._formElement.querySelectorAll(this._enableValidationConfig.inputSelector));
this._submitSaveButton = this._formElement.querySelector(this._enableValidationConfig.submitButtonSelector);
}
_toggleSaveButton() {
if (this._formElement) {
this._submitSaveButton.classList.remove(this._enableValidationConfig.inactiveButtonClass); //config
this._submitSaveButton.disabled = false;
} else {
this._submitSaveButton.classList.add(this._enableValidationConfig.inactiveButtonClass); //config
this._submitSaveButton.disabled = true;
}
}
_showInputError(inputElement) {
const errorElement = this._formElement.querySelector(`.popup__input-error_type_${inputElement.name}`);
inputElement.classList.add(this._enableValidationConfig.inputErrorClass);
errorElement.textContent = validationMessage;
};
_hideInputError(inputElement) {
const errorElement = this._formElement.querySelector(`.popup__input-error_type_${inputElement.name}`);
inputElement.classList.remove(this._enableValidationConfig.inputErrorClass);
errorElement.textContent = '';
};
_isValid(inputElement) {
if (!inputElement.validity.valid) {
this._showInputError(inputElement);
} else {
this._hideInputError(inputElement);
}
};
_trackEventListener() {
this._toggleSaveButton();
this._inputPopup.forEach((inputElement) => { // inputPopup
inputElement.addEventListener("input", () => {
this._isValid(inputElement);
this._toggleSaveButton();
});
});
}
enableValidation() {
this._trackEventListener();
}
}
index.js
import { FormValidator } from "../scripts/FormValidator.js";
import { Card } from "../scripts/Card.js";
// 0.1 общее
const closeButtons = document.querySelectorAll('.popup__close');
// 0.1 общее
// 1.1 окно редактирования профиля
const profilePopup = document.querySelector('.profile-popup');
const buttonEditProfileOpen = document.querySelector('.profile__editbutton');
const getName = document.querySelector('.profile__name');
const getAbout = document.querySelector('.profile__about');
const editForm = document.querySelector('.popup__container');
const nameInput = editForm.querySelector('.popup__input_type_name');
const aboutInput = editForm.querySelector('.popup__input_type_about');
//const buttonEditProfileSave = document.querySelector('.popup__savebutton');
//const buttonEditProfileClose = document.querySelector('.popup__closebutton');
//const profileEditForm = document.querySelector('.popup__editprofile');
// 1.1 окно редактирования профиля
// 2.1 окно добавления фотокарточки
//const popupPhoto = document.querySelector('.popup-addphoto');
const buttonAddPhotoOpen = document.querySelector('.profile__addbutton');
//const editFormPhoto = document.querySelector('.popup__container-addphoto');
//const buttonAddPhotoSave = document.querySelector('.popup__savebutton-addphoto');
//const buttonAddPhotoClose = document.querySelector('.popup__closebutton-addphoto');
// 2.1 окно добавления фотокарточки
// 3.1 карточки
const elementsAlbum = document.querySelector('.album__elements');
const albumSection = document.querySelector('.popup-openphoto');
const albumPhoto = albumSection.querySelector('.popup__photo-openphoto');
const albumElementsInfo = albumSection.querySelector('.popup__photo-info');
//const buttonElementsAlbumClose = albumSection.querySelector('.popup__closebutton-photo');
const popupAddphoto = document.querySelector('.popup-addphoto');
const editFormAddPhoto = popupAddphoto.querySelector('.popup__editprofile-addphoto');
const titleInput = popupAddphoto.querySelector('.popup__input-addphoto_type_title');
const linkInput = popupAddphoto.querySelector('.popup__input-addphoto_type_link');
//const elementPhoto = document.querySelector('.element__photo');
const templateElement = document.querySelector('#template-element').content;
const initialCards = [
{
name: 'NY, caladium',
link: 'https://images.unsplash.com/photo-1596670616944-60db8c2a24f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80'
},
{
name: 'Altai Republic, dahlia',
link: 'https://images.unsplash.com/photo-1631100615885-16e05606aa11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80'
},
{
name: 'Earth, Java Script',
link: 'https://i.gifer.com/8Ggv.gif'
},
{
name: 'Sri-Lanka, alocasia',
link: 'https://images.unsplash.com/photo-1547070078-442aa97f595a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80'
},
{
name: 'Vietnam, nymphaea',
link: 'https://images.unsplash.com/photo-1560741232-886afab774be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80'
},
{
name: 'Detroit, papaver',
link: 'https://images.unsplash.com/photo-1589720061712-10b534c7218e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80'
}
];
// 3.1 карточки
// 4.1
const enableValidationConfig = {
formSelector: '.popup__editprofile',
inputSelector: '.popup__input',
submitButtonSelector: '.popup__savebutton',
inactiveButtonClass: 'popup__savebutton_error',
inputErrorClass: 'popup__input-errorline',
};
// 4.1
// 0.2 общее
function handlePressEsc(event) {
if (event.key === "Escape") {
const openedPopupActive = document.querySelector(".popup_opened");
closePopup(openedPopupActive);
}
}
function handleClickOverlay(event) {
if (event.target.classList.contains("popup")) {
closePopup(event.target);
}
}
function openPopup(popup) {
popup.classList.add('popup_opened');
document.addEventListener("keyup", handlePressEsc);
document.addEventListener("click", handleClickOverlay);
}
function closePopup(popup) {
popup.classList.remove('popup_opened');
document.removeEventListener("keyup", handlePressEsc);
document.removeEventListener("click", handleClickOverlay);
}
closeButtons.forEach((button) => {
const popup = button.closest('.popup');
button.addEventListener('click', () => closePopup(popup));
});
// 0.2 общее
//1.2 окно редактирования профиля
// function openProfilePopup() {
// nameInput.value = getName.textContent;
// aboutInput.value = getAbout.textContent;
// closePopup(profilePopup);
// }
function handleProfileFormSubmit(evt) {
evt.preventDefault();
getName.textContent = `${nameInput.value}`;
getAbout.textContent = `${aboutInput.value}`;
closePopup(profilePopup);
formValidator["editForm"].resetValidation();
}
// 1.2 окно редактирования профиля
// 3.2 карточки
function openPhoto(link, alt) {
albumPhoto.src = link;
albumPhoto.alt = alt;
albumElementsInfo.textContent = alt;
openPopup(albumSection);
}
function createCard(item) {
const cardElement = new Card(item, templateElement, openPhoto).createNewCard();
return cardElement
}
function createAddCard(evt) {
evt.preventDefault();
const newElement = createCard({ name: titleInput.value, link: linkInput.value });
elementsAlbum.prepend(newElement);
closePopup(popupAddphoto);
editFormAddPhoto.reset();
formValidator["editFormAddPhoto"].resetValidation();
//toggleSaveButton(buttonAddPhotoSave, false, enableValidationConfig);
}
function renderInitialCards() {
const expandPhoto = initialCards.map(createCard);
elementsAlbum.append(...expandPhoto);
}
renderInitialCards();
// 3.2 карточки
// 4.2
const formValidator = {};
function enableValidation() {
const editForm = document.querySelectorAll(enableValidationConfig.formSelector);
editForm.forEach((formElement, enableValidationConfig) => {
//trackEventListener(formElement, enableValidationConfig);
formElement.addEventListener("submit", (evt) => {
evt.preventDefault();
});
const submitSaveButton = formElement.querySelector(enableValidationConfig.submitButtonSelector);
//toggleSaveButton(submitSaveButton, formElement.checkValidity(), enableValidationConfig);
const validator = new FormValidator(formElement, enableValidationConfig);
const formName = formElement.getAttribute("name");
formValidator[formElement] = validator;
validator.enableValidation();
});
}
enableValidation();
// 4.2
// 1.3 окно редактирования профиля
buttonEditProfileOpen.addEventListener('click', () => {
nameInput.value = getName.textContent;
aboutInput.value = getAbout.textContent;
openPopup(profilePopup)
});
editForm.addEventListener('submit', handleProfileFormSubmit);
// 1.3 окно редактирования профиля
// 2.3 окно добавления фотокарточки
buttonAddPhotoOpen.addEventListener('click', () => openPopup(popupAddphoto));
// 2.3 окно добавления фотокарточки
// 3.3 карточки
editFormAddPhoto.addEventListener('submit', createAddCard);
// 3.3 карточки