TypeError: Cannot read properties of null (reading 'addEventListener') in Javascript

Dung Do Tien May 28 2022 261

I have a project final exam about Html and Javascript. I need to create a login form.  and when the user clicks on Submit button I need to validate the form first. I try to code as below:

My HTML file:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Stacked form</h2>
  <form action="#">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <button type="button" class="btn btn-primary" name="btnSubmit">Submit</button>
  </form>
</div>
</body>
</html>

And below is my javascript code handled for submit button.

 const btn = document.getElementById('btnSubmit');
btn.addEventListener('click', () => {
    let email = document.getElementById("email").value;
    let pass = document.getElementById("pwd").value;
    console.log(email + " : " + pass);
});

I used Bootstrap to help raw a form but when I run this code in the browser but I see an exception "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')".

 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at <anonymous>:5:7
    at submitTryit (tryit.asp?filename=trybs_form_basic&stacked=h:604:19)
    at HTMLButtonElement.onclick (tryit.asp?filename=trybs_form_basic&stacked=h:471:164)

How can I solve this issue?

Thank you in advance!!!

Have 1 answer(s) found.
  • p

    prem keshari May 28 2022

    This error occurred because your form does not exist any HTML tag has an id equal to btnSubmit

    Solution 1: add more attribute id="btnSubmit" to your Summit button.

     <button type="button" class="btn btn-primary" id="btnSubmit" name="btnSubmit">Submit</button>

    Solution 2: use getElementByTagName() method

     const btn = document.getElementsByTagName("button")[0];
      btn.addEventListener('click', () => {
        let email = document.getElementById("email").value;
        let pass = document.getElementById("pwd").value;
        console.log(email + " : " + pass);
    });

    I hope this answer is all you need!!!

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close