无法将属性“ onfocus”设置为null

Question

即使输入密码的ID存在，我仍然在onfocus函数中出现错误
这是我的代码的片段

let myInput = document.getElementById("pwd"); 

myInput.onfocus = function () {
    document.getElementById("message").style.display = "block";
}

myInput.onblur = function () {
    document.getElementById("message").style.display = "none";
}

<div class="form-group">
                        <label class="col-md-4 control-label">Password</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-user"></i>
                                </span>
                                <input name="user_password" id="pwd" placeholder="Password" class="form-control" type="password">
                            </div>
                        </div>
                        <div id="message">

                            ....
                        
                        </div>
                    </div>

Answer 1

您的代码的问题是"message"的ID不存在，因此您发现此错误。

let myInput = document.getElementById("pwd");
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}

<div class="form-group">
  <label class="col-md-4 control-label">Password</label>
  <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
      <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-user"></i>
                                </span>
      <input name="user_password" id="pwd" placeholder="Password" class="form-control" type="password">
    </div>
  </div>
  <div id="message" style="display:none">Message goes here</div>

Answer 2

在您将div添加到id=message后，您的代码似乎运行正常

let myInput = document.getElementById("pwd"); 

myInput.onfocus = function () {
    document.getElementById("message").style.display = "block";
}

myInput.onblur = function () {
    document.getElementById("message").style.display = "none";
}

<div class="form-group">
  <label class="col-md-4 control-label">Password</label>
  <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
      <span class="input-group-addon">
        <i class="glyphicon glyphicon-user"></i>
      </span>
      <input name="user_password" id="pwd" placeholder="Password" class="form-control" type="password">
    </div>
  </div>
  <div id="message">
    ....
  </div>
</div>