Почему выпадает ошибка и как ее исправить?

Question

[Webstudent31]

Всем привет. В консоли возникает следующая ошибка "Uncaught TypeError: Cannot read property 'classList' of null
at FormValidator._hideInputError (FormValidator.js:45)". Все перепроверил миллион раз, но все без толку. Гляньте, пожалуйста, в чем проблема?

_hideInputError(inputElement) {  
        const errorElement = this._formElement.querySelector(`.${inputElement.id}-error`);  
        inputElement.classList.remove(this._config.inputErrorClass);  
        errorElement.classList.add(this._config.errorClass);  
        errorElement.textContent = '';  
    }

весь код класса доступен по ссылке https://codepen.io/azNex/pen/powwQWm

Comments

[Роман]

_hideInputError(inputElement) {  
        const errorElement = this._formElement.querySelector(`.${inputElement.id}-error`);  
        inputElement.classList.remove(this._config.inputErrorClass);  // ругается на эту строчку
        ...

а сама ошибка говорит о том, что inputElement у вас равен null. Для того чтобы узнать почему так выходит нужно смотреть рабочий код, а не тот огрызок, что вы показали на codepen. Потрудитесь прикрутить на codepen валидатор к html коду так, чтобы мы могли увидеть вашу ошибку, тогда и ответ появится быстрее

[Webstudent31]

Роман, https://alexdor01.github.io/mesto/ Вот, пожалуйста, тут есть все

[Роман]

Webstudent31, дебажить собранный webpack-ом без source.map файла код? Как нибудь сами)))

а так, судя по стактрейсу

main.js:1 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at e.value (main.js:1)
    at main.js:1
    at Array.forEach (<anonymous>)
    at e.value (main.js:1)
    at HTMLElement.<anonymous> (main.js:1)

у вас в массив this._inputList каким то образом затесался элемент null

removeValidationErrors(){
      this._inputList.forEach((itemElement) => {
        // один из itemElement тут равен null
        this._hideInputError(itemElement)
      });
    }

[Webstudent31]

Роман, очень интересно, но мало, что понятно. А как можно найти этот null? Сейчас прошелся по цепочке inputList -> FormElement, но толком плохого не увидел ничего

[Роман]

Webstudent31, еще раз повторюсь, сделайте на codepen пример, воспроизводящий данную ошибку и тогда я смогу вам помочь

[Webstudent31]

Роман, простите, не свовсем понимаю, как мне это сделать. Мне нужно залить весь код на codepan?

[Роман]

Webstudent31, нет, вам нужно засунуть на кодепен какую нибудь простую форму и прикрутить к ней валидатор таким образом чтобы сохранилась ошибка.

[Роман]

Webstudent31, я почти уверен что ошибка не в коде валидатора, и чтобы это проверить попробуйте сделать так

export class FormValidator {
    constructor(config, formElement) {
      this._config = config;
      this._formElement = formElement;
      this._inputList = Array.from(this._formElement.querySelectorAll(this._config.inputSelector));
      this._buttonElement = this._formElement.querySelector(this._config.submitButtonSelector);

      // проверяем входные данные
     this._inputList.forEach((v,i)=>{
         if(v === null)  console.log('!!!!',  i)
     })
     
    }

и если в консоль уппадет сообщение типа "!!!! номер" то я прав и ошибка где-то в коде за пределами валидатора

[Webstudent31]

Роман, я нашел ошибку, Вы были правы. Я не всем inputElement прописал id