Как мне избавиться от этой ошибки? TypeError: Невозможно установить свойство 'onfocus' для null - PullRequest
Новая
       161

Как мне избавиться от этой ошибки? TypeError: Невозможно установить свойство 'onfocus' для null

0 голосов
/ 05 марта 2020

Итак, у меня есть этот angular компонент для поля формы <input>, для библиотеки шаблонов. Я настроил все необходимые части для его отображения и функционирования. Тем не менее, я добавил некоторые функции для повышения <label> и удержания <label>, когда текст вводится в поле, или onfocus, а <label> должен оставаться поднятым onblur, если в <input> есть текст текстовое поле. Код работал несколько дней go и ничего не изменилось. Вот компонент HTML: 

            <div class="regular-text" id="regularFormField">
                <a href="{{HelperUrl}}" *ngIf="HelperUrl">{{HelperUrltext}}</a>          
                <span *ngIf="state == 'Validation'" class="valid"><img src="../../assets/01-green-validate-check.png" alt="valid icon">{{ValidMssg}}Valid bank number</span>
                <span *ngIf="state == 'Error'" class="error" id="wrongText"><img src="../../assets/error-icon.svg" alt="error icon">{{ErrorMssg}}We don’t recognize this email. Please try again.</span>
                <input type="{{FormType}}" id="email" aria-label="" [ngClass]="{'disabled': state == 'Disabled', 'error': state == 'Error', 'valid': state == 'Validation'}" [attr.disabled]="state == 'Disabled' ? 'disabled' : null">
                <label for="{{FormType}}" aria-label="" id="labelone" [ngClass]="{'disable-text': state == 'Disabled'}">{{FormType}}</label>
            </div>
        </div>

А вот код JS: 


  ngOnInit() {
    const input = document.getElementById("email");

    const formOutline = document.getElementById("regularFormField");
    const label = document.getElementById("labelone");

    input.onfocus = () => {
      formOutline.classList.add("focused");

    };

    input.onblur = () => {
      formOutline.classList.remove("focused");
      label.classList.add("active");

      const inputValue = (<any>document).getElementById("email").value;

      if (inputValue == "") {

        label.classList.remove("active");
      }
    };
  } // ng init


Is there anything missing? I know a fresh set of eyes helps.

1 Ответ

1 голос
/ 05 марта 2020

Используйте инспектор DOM и операторы console.log для проверки, отладки и выявления проблемы, а затем проследите ее до источника.

Когда выполняется код JS, input равен нулю. Это означает, что элемент с идентификатором «email» не был найден.

Чтобы убедиться в этом, поместите console.log над вводом. Затем вручную осмотрите элементы DOM в инспекторе, чтобы увидеть, есть ли они там. Go оттуда.

Комментарии об изменении архитектуры вашего приложения могут быть хорошим советом - я не делаю Angular - но базовые c методы отладки, чтобы сузить его, необходимы для овладения вашим ремеслом .

Тебе не стоит волноваться о том, что здесь произошло. Если это действительно сработало и внезапно прекратилось, то вы либо внесли изменение, о котором не знаете, либо что-то еще происходит. В любом случае, вы хотите понять свою кодовую базу и ее работу - и если вы сделали что-то, что вызвало это, вы хотите знать, что это было, иначе вы, вероятно, сделаете то же самое в другом месте, и ваш опыт программирования будет быть разочаровывающим.

...