<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>DB Test</title>
</head>
<body>
<a><h1>DB Test</h1></a>
<div class="input-box">
<input id="email" type="text" name="username" placeholder="email">
<label for="email">Email</label>
</div>
<div class="input-box">
<input id="password" type="password" name="password" placeholder="pw">
<label for="password">password</label>
</div>
<input type="button" id="button" value="submit" onclick="newuser();">
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.4.0/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
const firebaseConfig = {
...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();
const email = document.getElementById('email').value
const password = document.getElementById('password').value
function newuser(){
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
}
</script>
</body>
</html>
I want to call newuser() function in script tag at onclick event in button, but error occurs like ‘newuser is not defined at HTMLInputElement.onclick’. I don’t know how to connect html code and javascript code(script tag) naturally, and I want to make newuser function occur when I click the button.
2
Answers
Try put the script tag with your newuser function into . You need declare the function first, then use it.
This is because with
<script type="module">
you indicate that your script should be treated as a module.Since each module has its own top-level scope, variables and functions from a module are not seen in other scripts or in the HTML part of the page. See here for more details.
You could solve your problem by attaching the function to
window
to use it globally:But this not really recommended… You should use a module bundler like Webpack, as explained in the Firebase documentation. "From version 9 and higher, the Firebase JavaScript SDK is optimized to work with the optimization features of module bundlers to reduce the amount of Firebase code included in your final build."
In addition, note that it is not recommended to use
onclick()
see this answer (among many answers in SO): better useaddEventListener()
.