當談到 JavaScript 時，我是一個完全的菜鳥，似乎無法解決這個問題。
我有一個 main.js 檔案，它是 Adob??e animate 的輸出。其中是我添加的以下相關代碼：
this.button = new lib.submit();
this.button.name = "button";
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
var data ={address:address}
console.log(data)
}.bind(this));
現在，我只是TextInput('addrs')在控制臺中顯示我輸入的資訊，以驗證一切正常。
我還在 index.js 中建立了與 Firebase 資料庫的連接，并且我有以下代碼：
push(ref(db), {
address: "1234 Maple Ln",
});
這只是我驗證 Firebase 可以接收資訊的靜態占位符。
我想要做的是將當前保存var data ={address:address}到 Firebase 的資訊而不是靜態的address: "1234 Maple Ln".
我在網上找到的所有教程都使用 HTML 表單。當提交按鈕位于不同的 JavaScript 檔案中時，你如何做到這push()一點？
uj5u.com熱心網友回復：
我想到了。
@Prajwal-Kulkarni 為我指明了正確的方向。我只需要改變
push(ref(db), {
address: "1234 Maple Ln",
});
到
window.writeUserData=function(address) {
push(ref(db), {
address
});
}
uj5u.com熱心網友回復：
根據檔案，您可以使用set()將資料寫入資料庫。該set()函式接受兩個引數：
ref函式，它進一步接受另外兩個引數
1.a. 資料庫實體
1.b. 資料庫的端點需要添加的資料。
因此，您可以創建一個函式來處理在 firebase 中創建資料，如下所示：
import { getDatabase, ref, set } from "firebase/database";
function writeUserData(address) {
const db = getDatabase();
set(ref(db, 'ENDPOINT/'), {
address
});
}
此外，您可以掛鉤此函式以單擊按鈕上的偵聽器（呼叫此函式并將所需資料作為引數傳遞）。
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
writeUserData(address)
console.log(data)
}.bind(this));
請注意，在獲取address資料后，我沒有將資料顯式轉換為物件，因為當鍵和值變數命名相同時，javaScript 會在后臺為我們執行此操作。這稱為物件解構。
如果您將函式和事件偵聽器放在兩個不同的檔案中，您可以將函式匯入到偵聽器所在的檔案中，或者在偵聽器中定義被呼叫函式邏輯。在這兩者中，建議前者保持代碼干凈和模塊化。
索引.js
import { getDatabase, ref, set } from "firebase/database";
export function writeUserData(address) {
const db = getDatabase();
set(ref(db, 'ENDPOINT/'), {
address
});
}
主.js
import {writeUserData} from 'path/to/indexjs'
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
writeUserData(address)
console.log(data)
}.bind(this));
（或）在點擊監聽器中包含資料推送邏輯：
import { getDatabase, ref, set } from "firebase/database";
this.button.on("click", function (a) {
var address = document.getElementById("addrs").value
const db = getDatabase();
set(ref(db, 'ENDPOINT/'), {
address
});
console.log(data)
}.bind(this));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/408015.html
標籤：