无法将数据推送到实时数据库firebase

Question

我正在制作一个页面，将数字推送到实时数据库 Firebase，但是当我单击按钮推送数字时，什么也没有发生。这是我的代码

<form>
    <input type="text" id="id"><br>
    <button id= "addbtn">make_nfc</button>
</form>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-database.js"></script>
<script>
    const firebaseConfig = {
        apiKey: "AIzaSyD4QdzB3fd2FTw2bZlEiR5_HW9x1O_9mH8",
        authDomain: "pet-care-20a90.firebaseapp.com",
        databaseURL: "https://pet-care-20a90-default-rtdb.firebaseio.com",
        projectId: "pet-care-20a90",
        storageBucket: "pet-care-20a90.appspot.com",
        messagingSenderId: "752435918706",
        appId: "1:752435918706:web:c87a176a2f47d757c4cfeb"
};
    firebase.initializeApp(firebaseConfig);
    const database = firebase.database();
    const f_id = document.getElementById("id").value;
    const addbtn = document.getElementById("addbtn");
    addbtn.addEventListener('click', (e) => {
         e.preventDefault();
        database.ref('id').set(f_id.value);
});
</script>

希望你能帮我解决这个问题

Answer 1

请参阅 将 Firebase 添加到 JavaScript 项目的其他方法。

Firebase v9+ 使用模块化系统，因此像

firebase

这样的顶级对象不再存在。

您的代码应该看起来更像这样，其中从相关模块导入特定的服务功能。

<form>
  <input type="text" id="id"><br>
  <button type="button" id="addbtn">make_nfc</button>
</form>
<!--    👇 Note the `type="module"` -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.6.0/firebase-app.js";
import {
  getDatabase,
  ref,
  set,
} from "https://www.gstatic.com/firebasejs/10.6.0/firebase-database.js";

const firebaseConfig = {
  /* ... */
};
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

const f_id = document.getElementById("id"); // 👈 note there is no `.value` here
const addbtn = document.getElementById("addbtn");

addbtn.addEventListener("click", async (e) => {
  e.preventDefault();
  await set(ref(database, "id"), f_id.value);
});
</script>