How to get Custom objects working in a HTML-page

Question

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

<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. I placed it 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?

(I asked the questions also in: https://github.com/firebase/snippets-web/issues/292)