Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

171
Views
Uncaught (in promise) TypeError: Cannot set properties of null (setting 'onclick') at users.js:18

I am trying to create a login form whereby the users data is fetched via a fetch request and is checked with the following javascript code:

fetch('./login.php', {
    method: 'GET'
})
.then((res) => res.json())
.then(res => {
    let user = []
        for (let data of res){
            user.push({
                email: "'"+data.email+"'",
                password : "'"+data.password+"'"
            })
        }

    let button = document.querySelector('.btn btn-danger submit');

    function login(){
        let email = document.getElementById('useremail').value;
        let password = document.getElementById('userpassword').value;
        for(i=0; i < user.length; i++){
            if(email == user[i].email && password == user[i].password){
                window.location = "home.html";
            }
        }
    }
    
    button.onclick =  login();
})

Whenever I check the console it shows the error in the title. Is there something wrong with how I am trying to go about this?

Here is my HTML code for the form (using bootstrap):

<form action="" id="loginform">
            <div class="mb-3">
                <label for="useremail" class="form-label">Email:</label>
                <input type="email" class="form-control" id="useremail" aria-describedby="Email" name="useremail" required>
            </div>
            <div class="mb-3">
                <label for="userpassword" class="form-label">Password:</label>
                <input type="password" class="form-control" id="userpassword" aria-describedby="Password" name="userpassword" required>
            </div>
            <button class="btn btn-danger submit" type="submit">Login</button>
            <div class="row mt-3">
                <a href="register.html" class="text-decoration-none text-decoration-underline text-dark fst-italic">Don't have an account? Register Here.</a>
            </div>
        </form>
about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

let button = document.querySelector('.btn btn-danger submit'); is wrong. It'll select a submit class inside btn-danger inside a btn class.

You need let button = document.querySelector('.btn.btn-danger.submit');. Or in my opinion, add an id to the button and use that.

Also, I am pretty sure button.onclick = login(); would be just button.onclick = login; as you don't need to execute the function immediately, but bind the function to the onclick.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!