How to get Custom objects working in a HTML-page

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 `` 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
`

Save to cities with City_Converter

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?