How to get Custom objects working in a HTML-page

[MarGer1962]

LS,
In the documentation (https://firebase.google.com/docs/firestore/manage-data/add-data#custom_objects)
it is said that u can use custom objects. They give an example,

I have this question. I just use HTML, Bootstrap and jQuery.
I made a HTML page - testfunction.html.
Between the <script></script> tags i have put the web app's Firebase configuration
i have put the class City and the cityConverter in the same part of the script where i set the web app's Firebase configuration

I made a button on that page like so
<p><button class="btn btn-primary btn-sm" id ="docConvert">Save to cities with City_Converter</button></p>

If you click the button then this function is executed:

document.getElementById("docConvert").addEventListener("click", dataConvert);
function dataConvert(){
var docID = "citie05";
db.collection("cities").doc(docID)
  .withConverter(cityConverter)
  .set(new City("New Los Angeles", "CA", "USA", 1000000));
}

My problem: the function does not work > data are not written to the database.
In my (browser)controller i get the message: "db.collection(...).doc(...).withConverter is not a function"

I tried to place the code var cityConverter = { ..};
in the part of my script where i placed the web app's Firebase configuration > does not work
and above the part of my script where i placed the document.getElementByID ...; > does not work

So i have this question: what am i doing wrong?