Почему у меня здесь вылазит ошибка Uncaught TypeError: Cannot set properties of null (setting 'textContent')
Искал ошибку в id, но все равно не удачно. Что ему не нравится?? html
<form class="popup__form" name="new-place" id="popup__form" novalidate>
<input type="text" name="place-name" class="popup__input popup__input_type_card-name" id="name_mesto" placeholder="Название" minlength="2" maxlength="30" data-error="Разрешены только латинские, кириллические буквы, знаки дефиса и пробелы" required>
<span class="popup__input_type_error popup__error_visible" id="name-error"></span>
<input type="url" name="link" class="popup__input popup__input_type_url" placeholder="Ссылка на картинку" id="profile_mesto" required>
<span class="popup__input_type_error popup__error_visible" id="url-error"></span>
<button type="submit" class="button popup__button popup__button_disabled">Сохранить</button>
</form>
JS
import { enableValidation } from './scripts/validation.js';
enableValidation({
formSelector: '.popup__form',
inputSelector: '.popup__input',
submitButtonSelector: '.popup__button',
inactiveButtonClass: 'popup__button_disabled',
inputErrorClass: 'popup__input_type_error',
errorClass: 'popup__error_visible'
});
export function showInputError(inputElement, errorMessage, settings) {
const errorElement = document.getElementById(`${inputElement.id}-error`);
inputElement.classList.add(settings.inputErrorClass);
errorElement.textContent = errorMessage;
errorElement.classList.add(settings.errorClass);
}
export function hideInputError(inputElement, settings) {
const errorElement = document.getElementById(`${inputElement.id}-error`);
inputElement.classList.remove(settings.inputErrorClass);
errorElement.textContent = '';
errorElement.classList.remove(settings.errorClass);
}
export function enableValidation(settings) {
const forms = document.querySelectorAll(settings.formSelector);
forms.forEach(formElement => {
formElement.addEventListener('submit', evt => {
evt.preventDefault();
});
const inputList = formElement.querySelectorAll(settings.inputSelector);
inputList.forEach(inputElement => {
inputElement.addEventListener('input', () => {
checkInputValidity(inputElement, formElement, settings);
});
});
});
}
function checkInputValidity(inputElement, formElement, settings) {
const errorMessage = inputElement.dataset.error;
const regExp = /^[a-zA-Zа-яА-Я\s-]*$/;
if (!regExp.test(inputElement.value)) {
showInputError(inputElement, errorMessage, settings);
} else {
hideInputError(inputElement, settings);
}
const isFormValid = Array.from(formElement.querySelectorAll(settings.inputSelector)).every(input => {
const regExp = /^[a-zA-Zа-яА-Я\s-]*$/;
return regExp.test(input.value);
});
const submitButton = formElement.querySelector(settings.submitButtonSelector);
if (isFormValid) {
submitButton.removeAttribute('disabled');
submitButton.classList.remove(settings.inactiveButtonClass);
} else {
submitButton.setAttribute('disabled', true);
submitButton.classList.add(settings.inactiveButtonClass);
}
}