Data not inserting in firebase database with JS

Question

Im trying to make a login form and i want that info to be save to my firebase database. I have written the code but the data doesn't get added to my firebase

Here is the code html code

<input type="password" id="password"  placeholder="Ur password" required
style="background-color: white; border: none; top: 55%; left: 41.5%; position: absolute; width: 15%; height: 3%;">




<button id="register"  style="position: absolute; left: 48%; color: green; top: 60%; border-radius: 2%; border-color: green;" >Continue</button>

Here is the code i used to connect to firebase

<script src="https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.1/firebase-database.js"></script> 

and here is the code im using to add the data to firebase:

<script id="main">
        const firebaseConfig = {

            ***The config info is here but i removed it for privacy reasons***

  };


  const app = initializeApp(firebaseConfig);
  var username, password;
  function ready (){
      username = document.getElementById('username').value;
      password = document.getElementById('password').value;
  }


  document.getElementById('register').onclick = function(){
      ready();
      firebase.database().ref('user/'+ username).set({
          user: username,
          pass: password
      })
  }

Answer 1

Are you sure the function is being triggered? If your button is in a form then it might trigger the default form submission. Also the set() method returns promise so try refactoring the function like this:

document.getElementById('register').onclick = async function() {
  // async function                           ^^^^^
  console.log('Register button clicked')
  ready();

  // add await 
  await firebase.database().ref('user/'+ username).set({
    user: username,
    pass: password
  })

  console.log('Date Added To Firebase')
}

If the button is in a form as mentioned earlier, try setting the type like this:

<button id="register" type="button" ></button>