<!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.
