Im trying to set some data from a text input from a web page to cloud firestore. I have this in one html file with the below code in a tag.

I used the code based on Firestore docs.

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.1.2/firebase-analytics.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js";
       
const firebaseConfig = {...};
      
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore();

   var name = getInputVal('cbname');

   function clubname() {
        
   db.collection("latest").add({
        clubName: name,
        })
    .then((docRef) => {
         console.log("Document written with ID: ", docRef.id);
        })
    .catch((error) => {
         console.error("Error adding document: ", error);
        });
    }

im using this code to get the input.

<label for="cbname">Club Name</label>
<input type="text" id="cbname" name="clubname">

<button class="save-button" onclick="clubname()" type="submit">Save</button>

ive tried a few different ways and I have ben unable to set data to a new document, add data to an existing document or update a document.

But for now, im just looking to set data.