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? — Konrad
– Konrad, Commented Feb 5, 2023 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
– lilllbroo, Commented Feb 5, 2023 at 20:53
There is no element with id registerModel in the html nor registerTrigger — Konrad
– Konrad, Commented Feb 5, 2023 at 20:55
Please provide a mcve. 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
– icecub, Commented Feb 5, 2023 at 21:00
@Konrad i didnt include the register model in the html code. Sorry about that — lilllbroo
– lilllbroo, Commented Feb 6, 2023 at 22:10

davsto · Accepted Answer · 2023-02-07 11:12:22Z

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 7, 2023 at 11:12

answered Feb 5, 2023 at 21:12

davsto

5626 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oskar Grosser Over a year ago

Though correct, prefer method addEventListener() over the onevent properties to add listeners.

lilllbroo Over a year ago

@davsto i tried doing that but still nothing happends. I updated my javascript code

Collectives™ on Stack Overflow

How to fix cannot read properties of null onclick?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related