Google Script Mapping

I was trying to use mapping on Google Script to enter a value on the City (id="city") field and show the Price (id="price") with the script below. The code below doesn’t work and didn’t provide any result on the price textbox. Moreover, would it be possible to do a multiple conditions? I mean the price will be displayed base on the City, Products, and Quantity. I have provided the image below. Thanks!

  <script>
 
    document.getElementById("btn").addEventListener("click",getPrice);

    function getPrice(){
      vCity = document.getElementById("city").value;
      google.script.run.withSuccessHander(updatePrice).getAmount(vCity);

    }

    function updatePrice(myprice) {
      document.getElementById("price").value = myprice;
    }

  </script>

Here’s my gs.

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("page");
}


function getAmount(city) {
  var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1FhWlaXixXPxq8EnHICfVR207aIkxtkzOgvdvt3hHuuI/edit#gid=0");
  var ws = ss.getSheetByName("Pricing");
  var data = ws.getRange(1, 1, ws.getLastRow(),2).getValues();

  var cityList = data.map(function(r){ return r[0]; });
  var priceList = data.map(function(r){ return r[1]; });
  var position = cityList.indexOf(city);

  if(position > -1){
    return priceList[position];
  } else {
    return "Unavailable";
  }