如何修复登录/注册Modal的onclick时无法读取null属性问题

问题分析 #

从提供的代码来看，错误的核心原因如下：

1. 注册Modal HTML代码不完整：注册Modal缺少多个闭合标签，导致DOM解析异常，元素无法被正确获取。
2. JS引用了不存在的DOM元素：
   • loginTrigger：登录Modal里的切换注册链接ID是logintoRegister，但JS中误用了loginTrigger，该元素实际不存在。
   • registerBtn：所有代码中无ID为registerBtn的元素，但JS尝试为其绑定点击事件。
3. 未做空值校验：直接为元素绑定onclick，若元素获取失败为null，会直接触发报错。

修复步骤 #

1. 补全注册Modal的HTML闭合标签 #

将注册Modal代码补充完整，确保所有标签正确闭合：

<div class="modal" id="registerModel">
      <div class="registerModelContent">
        <span class="registerClose">&times;</span>
        <div style="position: relative; bottom: -10pc;" class="container-fluid">
          <div class="row no-gutter">
              <!-- The image half -->
              <div style="position: relative;" class="col-md-6 d-none d-md-flex bg-image">
                <h1 style="    position: fixed;
                bottom: 14pc;
                left: 22pc;
                font-size: 1.3pc;
                color: white;
            " >Start creating tasks today!</h1>
                <p style="    position: fixed;
                bottom: 12pc;
                left: 17pc;
                color: white;" >Create a task by clicking the + Button on your dashboard</p>
              </div>


              <!-- The content half -->
              <div class="col-md-6" style="background-color: #333;" >
                  <div class="login d-flex align-items-center py-5">

                      <!-- Demo content-->
                      <div class="container">
                          <div class="row">
                              <div style="position: relative;  top: 1pc;" class="col-lg-10 col-xl-7 mx-auto">
                                <img class="adiavilogin" style="border-radius: 60px;" width="150" height="150" src="/static/img/AdiAvi.png">
                                  <h3  style="color: #ffff;" class="display-4">Register</h3>
                                  <p class="text-muted mb-4">Create your account today!</p>
                                  <form method="POST" action="{{ url_for('register') }}">
                                    <div class="form-group mb-3">
                                      <label  style="color: white;" for="inputEmail">Email</label>
                                      <input style=" background-color: black; color: white;" id="inputEmail" name="email" type="text" placeholder="Email" required="" autofocus="" class="form-control rounded-pill border-0 shadow-sm px-4">
                                  </div>
                                      <div class="form-group mb-3">
                                          <label  style="color: white;" for="inputUsername">Username</label>
                                          <input style=" background-color: black; color: white;" id="inputUsername" name="username" type="text" placeholder="Username" required="" autofocus="" class="form-control rounded-pill border-0 shadow-sm px-4">
                                      </div>
                                      <div class="form-group mb-3">
                                        <label style="color: white;" for="inputPassword">Password</label>
                                          <input style="background-color: black; color: white;" id="inputPassword" name="password"  type="password" placeholder="Password" required="" class="form-control rounded-pill border-0 shadow-sm px-4">
                                      </div>
                                      <input type="submit" value="Sign In" class="btn btn-primary btn-block text-uppercase mb-2 rounded-pill shadow-sm buttonSizeInput form-control">
                                      <a  class="form-control" style="color:    #3366CC; background-color: transparent; border: none;" id="registerTrigger"><u>Already have an account? Login!</u></a>
                                  </form>
                              </div>
                          </div>
                      </div><!-- End -->

                  </div>
              </div><!-- End -->
          </div>
      </div>
      </div>
    </div>

2. 修正JS中的元素引用及空值校验 #

修改JS代码，修正不存在的元素引用，同时添加空值判断，避免绑定事件到null上：

// 获取DOM元素
var loginModel = document.getElementById("loginModel");
var registerModel = document.getElementById("registerModel");
var loginBtn = document.getElementById("loginButton");
var registerTrigger = document.getElementById("registerTrigger");
// 修正：登录Modal里的切换链接ID是logintoRegister
var logintoRegister = document.getElementById("logintoRegister");
var loginSpan = document.getElementById("loginSpan");
var registerClose = document.getElementsByClassName("registerClose")[0];

// 绑定事件前先检查元素是否存在
if (loginBtn) {
  loginBtn.onclick = function() {
    loginModel.style.display = "block";
  }
}

if (registerTrigger) {
  registerTrigger.onclick = function() {
    loginModel.style.display = "none";
    registerModel.style.display = "block";
  }
}

if (logintoRegister) {
  logintoRegister.onclick = function() {
    registerModel.style.display = "none";
    loginModel.style.display = "block";
  }
}

if (loginSpan) {
  loginSpan.onclick = function() {
    loginModel.style.display = "none";
  }
}

// 若需使用registerBtn，请先在HTML中添加对应元素再取消注释
// if (registerBtn) {
//   registerBtn.onclick = function() {
//     registerModel.style.display = "block";
//   }
// }

if (registerClose) {
  registerClose.onclick = function() {
    registerModel.style.display = "none" ;
  }
}

3. 额外优化建议 #

• 推荐使用addEventListener绑定事件，相比直接赋值onclick更灵活，支持绑定多个事件。
• 可添加点击Modal外部关闭的逻辑：

window.onclick = function(event) {
  if (event.target == loginModel) {
    loginModel.style.display = "none";
  }
  if (event.target == registerModel) {
    registerModel.style.display = "none";
  }
}

内容的提问来源于stack exchange，提问作者lilllbroo