Unable to persist information in Firebase's real-time database

I'm having trouble saving data to my firebase database.

Although I don't see any errors on the site, the data in firebase remains null and doesn't change no matter what I do.

Here is the code snippet. HTML

<html>
    <head>
        <title>Testing Site</title>
        <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js" type="module"></script>
        <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-database.js" type="module"></scrip ${ strong2 } `,
]);
}
};
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-database.js";
const firebaseConfig = {
  apiKey: "***************************",
  authDomain: "***************************",
  databaseURL: "***************************",
  projectId: "***************************",
  storageBucket: "***************************",
  messagingSenderId: "***************************",
  appId: "***************************"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

function ordernow(){
  
  var floorNum = document.getElementById('floorNum').value;
  var floorSize = document.getElementById('floorSize').value;
  var lobbyNum = document.getElementById('lobbyNum').value;
  var lobbySize = document.getElementById('lobbySize').value;
  var windowsNum = document.getElementById('windowsNum').value;
  var parkingLot = document.getElementById('parkingLot').value;
  var parkingSize = document.getElementById('parkingSize').value;
  var garbageRoom = document.getElementById('garbageRoom').value;
  var garbageSize = document.getElementById('garbageSize').value;
  var garden = document.getElementById('garden').value;
  var gardenSize = document.getElementById('gardenSize').value;
  var onceAWeek = document.getElementById('onceAWeek').checked;
  var twiceAWeek = document.getElementById('twiceAWeek').checked;
  var ThreeAWeek = document.getElementById('ThreeAWeek').checked;
  var CleaningPerWeek = onceAWeek ? "lowonceAWeek" : (twiceAWeek ? "twiceAWeek" : (ThreeAWeek ? "ThreeAWeek" : "none"));
  var city = document.getElementById('city').value;
  var street = document.getElementById('street').value;
  var buildingNum = document.getElementById('buildingNum').value;
  var fName1 = document.getElementById('fName1').value;
  var lName1 = document.getElementById('lName1').value;
  var phone1 = document.getElementById('phone1').value;
  var email1 = document.getElementById('email1').value;
  var fName2 = document.getElementById('fName2').value;
  var lName2 = document.getElementById('lName2').value;
  var phone2 = document.getElementById('phone2').value;
  var email2 = document.getElementById('email2').value;

  set(ref(db, 'client/' + phone1), {
  Contact1: {FirstName: fName1, LastName:lName1, PhoneNumber: phone1,email: email1},
  Contact2: {FirstName: fName2, LastName:lName2, PhoneNumber: phone2,email: email2},
  Address: {City: city, sStreet: street, BuildingNum: buildingNum},
  BuildingData: {Floors: floorNum,FloorSize: floorSize,Lobbys: lobbyNum,Lobbysize: lobbySize,
  Winows: windowsNum, ParkingLot: parkingLot, ParkingLotSize: parkingSize, GarbageRoom: garbageRoom,
  GarbageRoomSize: garbageSize,Garden: garden,GardenSize: gardenSize},
  CleaningPerWeek:CleaningPerWeek
})
.then(() => {
  console.log('Data successfully written to Firebase');
})
.catch((error) => {
  console.error('Error writing to Firebase: ', error);
});
}

Answer №1

Adding this code snippet to the header of the HTML document solved the issue:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/7.14.1-0/firebase.js"></script>        <script src="func2.js"></script>       <!--  your js file here -->
    </head>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

What is a regex with a touch of greed in its capture

I am considering the following options: ' !This is a string! ' '!This is a string !' '! This is a string !' ' ! This is a string! ' ' ! This is a string ' For each of these scenarios, I aim to find ...

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...

Implementing the useEffect hook in React to iterate over JSON data and update the state

Having trouble implementing job location filtering ("remote"/"in-person"/"hybrid") for my personal project. As a beginner in programming, I've spent quite some time troubleshooting the fetchLocationData function and passing URLSearchParams. I anticipa ...

What is the best way to instruct firebase-admin to halt during test execution?

Running process.exit() or --exit in my mocha tests doesn't feel right. I'm currently working on code that utilizes firebase-admin and while attempting to run mocha tests, wtfnode showed me: wtfnode node_modules/.bin/_mocha --compilers coffee:co ...

Why was the express.js boilerplate code created?

As a newcomer to Node and Express, I am curious about the purpose of the boilerplate directories that are automatically generated when setting up an express project. I have searched online for explanations on the significance of these files without much l ...

Dynamic resizing navigation with JQUERY

I have successfully created a navigation menu that dynamically resizes each list item to fit the entire width of the menu using JavaScript. $(function() { changeWidth(500); function changeWidth(menuWidth){ var menuItems = $('#menu l ...

Is it possible to fill dropdown menus on a webpage using jQuery or JavaScript without the need for an ajax call?

Currently, I am looking to populate multiple dropdown lists using jQuery when the page loads rather than relying on ajax responses to events. My Controller is responsible for creating several List objects that will be used for these dropdowns. Right now, I ...

I am puzzled by the issue with my logic - the button only changes once and then the onclick function ceases to work

I am having an issue with a button that should switch between displaying temperatures in Fahrenheit and Celsius when clicked. It works for the first two clicks, but on the third click, it stops working even though I've set the class back to .temp. $( ...

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

Leveraging MongoDB imported documents within DerbyJS

I am facing a challenge with my MongoDB collection which was not saved through my Derby app. My goal is to query that data and pull it into my Derby app. After figuring out the solution, I have written the following code snippet: get '/:year', ...

Updating the filter predicate of the MatTableDataSource should allow for refreshing the table content without needing to modify the filter

Currently, I am working on dynamically altering the filterPredicate within MatTableDataSource to enhance basic filtering functionalities. I want to include a fixed condition for text filtering (based on user input in a search field) for two string columns ...

I'm looking for a solution to correct the array output from my function in node

I have a function that is currently functioning, but I am in need of proper array sorting. First, I will display my code, followed by the current output and then the desired output. Can someone help me edit my entire code and output? var app = require(&a ...

Node.js and TestCafe encountered a critical error: Inefficient mark-compacts were performed near the heap limit, resulting in an allocation failure. The JavaScript heap ran

While executing my test scripts in Node v14.6.0, I encountered the following problem. Here are some of the options I've tried: I attempted to increase the Node Heap Size but unfortunately had no success: export NODE_OPTIONS=--max_old_space_size=4096 ...

Tips for running a dry default with Angular CLI

Query: Can dry-run be set as the default in a configuration? Purpose: Enabling dry-run by default simplifies the learning process by minimizing clean-up tasks if the command is not correct. This can encourage users to always perform a test run before exec ...

Text inside the placeholder is not displaying correctly in the React.js user interface

When passing placeholder text as a prop to the <FormField/> component from the <CreatePost/>, I encountered an issue where the placeholder text was not displaying in the form. Interestingly, when I used console.log within the <FormField/> ...

After a postback in JavaScript, the Root Path variable becomes null

I have been attempting to save the Root URL in a JavaScript variable within my _Layout.cshtml like this: <script type="text/javascript> var rootpath = ""; $(document).ready(function () { rootpath = "@VirtualPathUtility.ToAbsolute("~/ ...

Evaluating the parser for oauth2 implicit grant access_token using javascript

I am currently developing an Angular application that utilizes the implicit grant oauth strategy. In case I do not have a valid access token in my cookies, I am redirected to the web interface of the authentication server where I input my credentials and t ...

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Angular Website Component: HTML file <content-section [text]="data"></content-section> TypeScript file data = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand ...

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...