How do you push data to firebase when a javascript button is clicked?

Question

I am a complete noob when it comes to JavaScript and cannot seem to solve this problem.

I have a main.js file that was an output from Adobe animate. Within that is the following pertinent code I added:

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));

Right now, I'm just displaying the information I typed into the TextInput('addrs') to the console to verify everything works.

I also established a connection to a Firebase database within the index.js and there I have the following code:

push(ref(db), {
  address: "1234 Maple Ln",
});

This is just a static placeholder for me to verify Firebase can receive information.

What I am trying to do is push the information that is now currently being saved to var data ={address:address} to Firebase instead of the static address: "1234 Maple Ln" .

All of the tutorials I've found online use an HTML form. How do you do this when the submit button is in a different JavaScript file than where the push() is?

Answer 1

As per the docs , you can use set() to write data to the database. The set() function accepts two arguments:

1. ref function, which further accepts two more arguments
   1.a. database instance
   1.b. Endpoint for the database
   

2. Data that needs to be added.

So you can create a function that handles creating of data in firebase, something like this:

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(address) {
  const db = getDatabase();
  set(ref(db, 'ENDPOINT/'), {
    address
  });
}

Further, you could hook this function to click listener on the button ( Invoke this function and pass the required data as a parameter).

this.button.on("click", function (a) {
        var address = document.getElementById("addrs").value
        writeUserData(address)
        console.log(data)
    }.bind(this));

Note that, after getting hold of the address data, I haven't explicitly converted the data into an object, because javaScript does that for us under the hood when the key and value variable are named the same. This is called Object destructuring .

If you have got the function and the event listener in two different files, you could either import the function in the file where the listener is present or, define the callee function logic within the listener. Of the two, the former is advised to keep the code clean and modular.

import { getDatabase, ref, set } from "firebase/database";

export function writeUserData(address) {
  const db = getDatabase();
  set(ref(db, 'ENDPOINT/'), {
    address
  });
}

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));

(Or) Include the data pushing logic within the click listener:

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));

Answer 2

I figured it out.

@Prajwal-Kulkarni pointed me in the right direction. I just had to change the

push(ref(db), {
   address: "1234 Maple Ln",
});

to

  window.writeUserData=function(address) {
  push(ref(db), {
    address
  });
  }