我如何摆脱这个错误？ TypeError：无法将属性'onfocus'设置为null

Question

因此，对于模式库，对于<input>表单字段，我具有此角度分量。我设置了所有必要的部件以使其显示和运行。但是，我添加了一些功能以在字段或<label>中输入文本时升高<label>并保持onfocus升高，并且如果<label>中有文本，则onblur应保持升高状态<input>文本域。几天前代码在起作用，并且没有任何变化。这是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. 

Answer 1

使用DOM检查器和console.log语句检查，调试和识别问题，然后将其追溯到源。

当您的JS代码运行时，input为空。这意味着找不到ID为“ email”的元素。

在上面的输入中输入console.log进行验证。然后在检查器中手动检查DOM元素以查看是否存在。从那里去。

关于更改应用程序体系结构的评论可能是个不错的建议-我不使用Angular，但是将其缩小范围的基本调试技术对于掌握您的技术至关重要。

您应该对这里发生的事情保持一致。如果它确实在工作并且突然停止，那么您要么做了一个您不知道的更改，要么正在发生其他事情。无论哪种方式，您都想了解您的代码库及其操作-如果您确实做了导致此事情的事情，则想知道它是什么，否则，您可能会在其他地方做同样的事情，并且您的编程经验将令人沮丧。