为什么我不能通过Html用Js写数据到Firebase ?

Question

我刚刚试图写一个非常基本的数据到我的firebase数据库，但它不工作。这是我使用的代码

<script src="https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app.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 = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
function writeUserData() {
firebase.database().ref('users').set({ uId: document.getElementById('fname').value,
refercode:document.getElementById('lname').value})
</script>
<form name="myForm">
<div class="col-25">
<label for="fname">text1</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your PlayStore Email.." required></input>
<div class="col-25">
<label for="lname">text2</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="codename" placeholder="Your PlayStore Email.." required></input>
</div> <button onclick="writeUserData()" class="button">Request Withdrawal</button></form>

但是这并没有向我的数据库写入任何数据。它在控制台中返回一个错误，"writeUserData"没有定义。我该如何解决这个问题?

Answer 1

由于您的脚本块类型为module，因此其内部结构不可全局使用。

使writeUserData可用于按钮单击处理程序的一种方法是将其添加到window对象中，如下所示:未定义

但是更好的解决方案是不依赖于内联onclick处理程序，而是在脚本模块本身中附加addEventListener处理程序，如:

<script type="module">
...
function writeUserData() {
firebase.database().ref('users').set({ uId: 
document.getElementById('fname').value,
refercode:document.getElementById('lname').value
})
}
// 👇
document.querySelector('button').addEventListener('click', writeUserData)
</script>