Connect web with firebase realtime database-CodePudding

I am trying to make a webpage that can link with firebase database. When i run my program, there are 2 errors when i run my code:

Uncaught ReferenceError: getDatabase is not defined
Uncaught SyntaxError: Identifier 'database' has already been declared

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Firebase - Client Side </title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <main>
       <form>
           <label for="tokenId">Token ID</label><br>
           <input type="text" name="tokenId" id="tokenId"><br>
           <label for="name">Name</label><br>
           <input type="text" name="name" id="name"><br>
           <label for="desc">Description</label><br>
           <input type="text" name="desc" id="description"><br>
           <label for="add">Address</label><br>
           <input type="text" name="address" id="address"><br>
           <button id="addBtn" >Add</button>
           <button id="updateBtn" >Update</button>
           <button id="removeBtn" >Remove</button>
       </form>

   </main>
   <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
   <script>
       var firebaseConfig = {
           apiKey: "APIKEY",
           authDomain: "firebaseapp.com",
           databaseURL: "https://firebasedatabase.app",
           projected: "firebase",
           storageBucket: "firebase.appspot.com",
           messagingSenderId: "123",
           appId: "123",
           measurementId: "123"
       };

       // Initialize Firebase
       firebase.initializeApp(firebaseConfig);

       // Get a reference to the database service
       const database = getDatabase(app);
   </script>

   <script type = "text/javascript" src="functions.js"></script>
</body>
</html>

const tokenId = document.getElementById("tokenId");
const name = document.getElementById("name");
const description = document.getElementById("description");
const address = document.getElementById("address");

const addBtn = document.getElementById("addBtn");
const updateBtn = document.getElementById("updateBtn");
const removeBtn = document.getElementById("removeBtn");

const database = firebase.database();
const rootRef = database.ref('tokens');

addBtn.addEventListener('click', (e) => {
   e.preventDefault();
   rootRef.child('tokens').set({
       token_id: tokenid.value,
       Name: name.value,
       Desc: description.value,
       Address: address.value
   });
});

* {
   padding: 0;
   margin: 0;
}

main {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

form {
   width: 400px;
   border: 1px solid #EBEBEB;
   padding: 5rem;
}

button {
   margin-top: 2rem;
}

This is how I want my dataset to look like in firebase

{
 "tokens": {
   "0": {
     "tokenid":"E3",
     "name": "H",
     "description":"Nice Food"
     "address":"A"
   },
   "1": {
     "tokenid":"E1",
     "name": "B",
     "description":"Nice Food"
     "address":"A"
   },
   "2": {
     "tokenid":"C1",
     "name": "B",
     "description":"Nice Food."
     "address":"A"
   }
 }
}

CodePudding user response：

You're importing version 7 of the Firebase SDK, so you need to use namespaced syntax from the documentation. You're doing that in firebase.initializeApp(firebaseConfig), but not in const database = getDatabase(app).

For version 8 and before, the equivalent is:

const database = firebase.database();

Also see the Firebase documentation on reading and writing from/to the database, which has examples in both the v8-and-before and the v9-and-after syntax.

Update since you already declare const database = firebase.database(); in functions.js, redeclaring it in the JavaScript block in your HTML is a syntax error.

A simple solution to fix that:

...
//