How to fix cannot read properties of null onclick?

Question

So, i am making a login model and i am trying to implement a way to close the model. All went well in creating the login and register models but there was on flaw. The javascript for closing the model is working.

here is my login modal code:

<div class="modal" id="loginModel">
      <div class="loginModelContent">
        <span id="loginSpan" class="loginClose">&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">Login</h3>
                              <p class="text-muted mb-4">Enter your user credentials to login</p>
                              <form method="POST" action="/login">
                                  <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="logintoRegister"><u>Don't have a account? Register!</u></a>
                              </form>
                          </div>
                      </div>
                  </div><!-- End -->

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

      </div>
  </div>-
      </div>
    </div>

Here is my register model code:

<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;" >Crete 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 -->

Here is my javascript:

var loginModel = document.getElementById("loginModel");

var registerModel = document.getElementById("registerModel");

var loginBtn = document.getElementById("loginButton");

var registerTrigger = document.getElementById("registerTrigger")

var loginTrigger = document.getElementById("loginTrigger")

var registerBtn = document.getElementById("registerBtn")

var loginSpan = document.getElementById("loginSpan");

var registerClose = document.getElementsByClassName("registerClose")[0];

// When the user clicks the button, open the modal 
loginBtn.onclick = function() {
  loginModel.style.display = "block";
}

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

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

loginSpan.onclick = function() {
  loginModel.style.display = "none";
}
registerBtn.onclick = function() {
  registerModel.style.display = "block";
}
registerClose.onclick = function() {
  registerModel.style.display = "none" ;
}

yes i know this is really bad organized.

Ok first, i went on stackoverflow and i saw a lot of people had this problem. I tried basic solutions like keeping my javascript at the bottom of the webpage which i already did. And then i tried putting all my code in a wrapper, which was like window.onload when loginModel was opened i expected that one to actually work, but i guess not.

Can/Does anyone know how to fix this very annoying problem?

Answer 1

The problem is that you are trying to access the onclick function of an object that was not found. Have you checked all IDs? I can't find the ID loginButton in your HTML code, for example.

Further more (old):

There’s one = too many in your code at loginTrigger.onclick. Update your code from

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

to

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