By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript uncaught typeerror cannot read properties of null ( reading 'queryselector')


Well-Known Coder
hello I'm really new at javascript and I'm trying to get better at it but right now I'm running into a problem? and because I don't really understand java I have no idea what this means.
// er zit hier een probleem die ik maar niet kan vinden hij snapt namelijk continue btn niet

//code voor de signup form tags
const form = document.querySelector(".signup form"),
//code voor de button continue
continueBtn = form.querySelector(".button input");

form.onsubmit = (e)=>{
    e.preventDefault(); //preventing from form submitting
//functie voor de button
continueBtn.onclick = ()=>{
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "php/signup.php", true);
    xhr.onload = ()=>{


the error is on the continueBtn
uncaught typeerror cannot read properties of null (reading 'queryselector')

if it helps here is my html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realtime applicatie tutorial</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="wrapper">
        <!--Dit is een login form -->
        <section class="form singup">
            <header>Realtime chat app</header>
            <form action="#">
                <div class="error-txt"> This is an error message!</div>
                <div class="name-details">
                    <div class="field input">
                        <label>First Name</label>
                        <input type="text" placeholder="First Name">
                    <div class="field input">
                        <label>Last Name</label>
                        <input type="text" placeholder="Last Name">
                    <div class="field input">
                        <input type="text" placeholder="Email">
                    <div class="field input">
                        <input type="password" placeholder="Enter password">
                        <i class="fa fa-eye" aria-hidden="true"></i>
                    <div class="field image">
                        <label>Select profile picture</label>
                        <input type="file"> <!--Dit zet bestand kiezen op de pagina-->
                    <div class="field button">
                        <input type="submit" value="Continue to chat">
            <div class="link">Heb je al een account? <a href="#">Login</a></div>
    <script src="javascript/pass-show-hide.js"></script>
    <script src="javascript/signup.js"></script>
if it helps here is my html
Of course, it helps; it always helps. They are related. JS listens to and modifies the HTML.
First mistake: const form = document.querySelector(".signup form"), S/B a semicolon [;] not a comma [,].
You used a tag name [form] for a variable name. It will get you in trouble. Use var names that make sense in the application. myForm would work better.
continueBtn = document.querySelector(".button"); does work here.
"onclick" is not a js word.
You should use listeners in js to check the status of a button.
continueBtn = document.querySelector(".button");

continueBtn.addEventListener('click', function() {alert("click");});
I'm not sure if your AJAX code works. Look it up if it doesn't.

...because I don't really understand java I have no....
Java is a separate language. JS should never be abbreviated as have, it confuses everyone. Use js instead.

New Threads

Latest posts

Buy us a coffee!

Top Bottom