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?

Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Konrad, Feb 05 '23 at 20:50
I looked at it. It doesn't really answer my question because i put a defer object when i linked my script. And my js is at teh end of my code. — lilllbroo, Feb 05 '23 at 20:53
There is no element with id `registerModel` in the html nor `registerTrigger` — Konrad, Feb 05 '23 at 20:55
Please provide a [mcve](https://stackoverflow.com/help/minimal-reproducible-example). Edit your question and use the HTML/JS/CSS Snippet tool to create a minimal, verifiable example of your issue so we can debug it and tell you what's wrong. As it stands, the only "related issue" in the code you've provided is that the code for the Modal isn't present in it. Unless you're accidentally trying to select a non existent element, the issue must be somewhere else and you'll need to provide us with enough details to help with that. — icecub, Feb 05 '23 at 21:00
@Konrad i didnt include the register model in the html code. Sorry about that — lilllbroo, Feb 06 '23 at 22:10

davsto · Answer 1 · 2023-02-07T11:12:22.170

2

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

edited Feb 07 '23 at 11:12

answered Feb 05 '23 at 21:12

davsto

442
5
11

Though correct, prefer method `addEventListener()` over the `onevent` properties to add listeners. – Oskar Grosser Feb 06 '23 at 13:29
@davsto i tried doing that but still nothing happends. I updated my javascript code – lilllbroo Feb 06 '23 at 22:09

How to fix cannot read properties of null onclick?

1 Answers1