Soy un completo novato cuando se trata de JavaScript y parece que no puedo resolver este problema.
Tengo un archivo main.js que fue una salida de Adobe animate. Dentro de eso está el siguiente código pertinente que agregué:
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)); En este momento, solo estoy mostrando la información que ingresé en TextInput('addrs') en la consola para verificar que todo funcione.
También establecí una conexión a una base de datos de Firebase dentro de index.js y allí tengo el siguiente código:
push(ref(db), { address: "1234 Maple Ln", });Esto es solo un marcador de posición estático para verificar que Firebase pueda recibir información.
Lo que estoy tratando de hacer es enviar la información que ahora se guarda actualmente en var data ={address:address} a Firebase en lugar de la address: "1234 Maple Ln" .
Todos los tutoriales que he encontrado en línea usan un formulario HTML. ¿Cómo haces esto cuando el botón Enviar está en un archivo JavaScript diferente al que está push() ?
Según los documentos , puede usar set() para escribir datos en la base de datos. La función set() acepta dos argumentos:
función ref , que además acepta dos argumentos más
1.a. instancia de base de datos
1.b. Punto final para la base de datos
Datos que deben agregarse.
Entonces puede crear una función que maneje la creación de datos en firebase, algo como esto:
import { getDatabase, ref, set } from "firebase/database"; function writeUserData(address) { const db = getDatabase(); set(ref(db, 'ENDPOINT/'), { address }); }Además, puede conectar esta función para hacer clic en el botón de escucha (invoque esta función y pase los datos requeridos como parámetro).
this.button.on("click", function (a) { var address = document.getElementById("addrs").value writeUserData(address) console.log(data) }.bind(this)); Tenga en cuenta que, después de obtener los datos de la address , no he convertido explícitamente los datos en un objeto, porque javaScript lo hace por nosotros bajo el capó cuando la clave y la variable de valor tienen el mismo nombre. Esto se llama desestructuración de objetos .
Si tiene la función y el detector de eventos en dos archivos diferentes, puede importar la función en el archivo donde está presente el detector o definir la lógica de la función de destinatario dentro del detector. De los dos, se aconseja al primero que mantenga el código limpio y modular.
Índice.js
import { getDatabase, ref, set } from "firebase/database"; export function writeUserData(address) { const db = getDatabase(); set(ref(db, 'ENDPOINT/'), { address }); }Principal.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));(O) Incluya la lógica de envío de datos dentro del detector de clics:
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));Me lo imaginé.
@Prajwal-Kulkarni me indicó la dirección correcta. Solo tuve que cambiar el
push(ref(db), { address: "1234 Maple Ln", });a
window.writeUserData=function(address) { push(ref(db), { address }); }