TypeError: Cannot read properties of null (reading 'addEventListener') in Javascript
Dung Do Tien May 28 2022 544
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.
- p0
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()methodconst 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!!!
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.