I’m creating a website for sign in and sign up, but event.preventDefault() doesn’t seem to work well. It works fine on the sign up button, but it refreshes every time I press the sign in button.
Uncaught TypeError: Cannot read property ‘addEventListener’ of null
At window.onload (firebase.js:27) error,
I think the code is loaded. What should I do?
- event.preventDefault() is not working on Sign in button(Every time I press it, it refreshes page)
- BUT it works well on Sign up button
- they are same submit buttons
Below are my codes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="postArchive" content="postArchive Login Page">
<meta name="description" content="postArchive Login Page">
<meta name="author" content="leeyunseokarchive">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>postArchive</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
</head>
<body>
<form>
<h1>Login</h1>
<div>
<input type="email" id='signInEmail' placeholder="Email" />
</div>
<div>
<input type="password" id='signInPassword' placeholder="Password" />
</div>
<button type="button" onclick="location.href='signUpPage.html'">Sign up</button>
<button type="submit" id='signInButton'>
Login
</button>
</form>
<script type="module" src="firebase.js"></script>
<script src="script.js"></script>
</body>
</html>
signUpPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="postArchive" content="postArchive Sign Up Page">
<meta name="description" content="postArchive Sign Up Page">
<meta name="author" content="leeyunseokarchive">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>postArchive</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
</head>
<body>
<form>
<h1>Sign Up</h1>
<button type="button" onclick="location.href='index.html'">
< </button>
<div>
<input type="email" id='signUpEmail' placeholder="Email" />
</div>
<div>
<input type="password" id='signUpPassword' placeholder="Password" />
</div>
<button type="submit" id='signUpButton'>
Submit
</button>
</form>
<script type="module" src="firebase.js"></script>
<script src="script.js"></script>
</body>
</html>
firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-analytics.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "------",
authDomain: "-----",
projectId: "------",
storageBucket: "-----",
messagingSenderId: "-----",
appId: "-----",
measurementId: "-----"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth();
//sign up
document.getElementById('signUpButton').addEventListener("click", (event) => {
event.preventDefault()
const signUpEmail = document.getElementById('signUpEmail').value
const signUpPassword = document.getElementById('signUpPassword').value
createUserWithEmailAndPassword(auth, signUpEmail, signUpPassword)
.then((userCredential) => {
console.log(userCredential)
// Signed up
const user = userCredential.user;
// ...
})
.catch((error) => {
console.log('sign up error')
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
})
//sign in
document.getElementById('signInButton').addEventListener("click", (event) => {
event.preventDefault()
const signInEmail = document.getElementById('signInEmail').value
const signInPassword = document.getElementById('signInPassword').value
signInWithEmailAndPassword(auth, signInEmail, signInPassword)
.then((userCredential) => {
// Signed in
console.log(userCredential)
const user = userCredential.user;
// ...
})
.catch((error) => {
console.log('sign in error')
const errorCode = error.code;
const errorMessage = error.message;
});
})
i want to solve this problem 🙁
3
Answers
event.preventDefaultbasically stops the default browser action, the action of submitting the form and refreshing the page happens on the form’s submit event not on button click event.You can add a submit event listener on the form element and do a prevent default there do all the action there.
The reason the page refreshes is not the button, but the
<form>tag.look here
Stop form refreshing page on submit
The two html pages that you have namely signup.html and signin.html are trying to load the javascript that you have written namely firebase.js. When the javascript is loaded, it tries to get the button in both pages and fails to find the signUpButton when signin.html calls the javascript and errors out therefore not executing the javascript for the signIn Handler. Either wrap the addEventListener javascript in try catch blocks or separate your js for signUp and signIn into two javascript files.