尝试编写JavaScript输出我的网站的运费，但代码不会显示该值

Question

这是我到目前为止的代码。 有人将其发布给人们使用。 它可以很好地计算距离，但是当我尝试计算运输成本时，它不会给我一个错误，但也不会输出该值。 “ $？” 保持不变。 我没有太多的编码经验，并且尝试了很多事情。 我在这里茫然。 请帮忙！

<font face="cookie"><script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">    </script>

<!-- Browser key 1 -->
<script src="http://maps.google.com/maps?    file=api&v=2&key=AIzaSyA9kMASRkOAbPFdzd4u5o_F0JyXKieOSQk"     type="text/javascript"></script>
<script type="text/javascript">
//Initialize location vars 
var location1;
var location2;
$(document).ready(function() {
  console.log('test');
  initialize();

  //Grab the address values from the form on submit, and then run the maps code
   $('#map-form').submit(function(event) {
      //Also, stop the form from actually submitting
      event.preventDefault();
      address1 = $('#address1').val();
      address2 = $('#address2').val();
      //Run it, baby!
      showLocation();
  });
});
var geocoder, location1, location2;
function initialize() {
  //Create new object of the google maps api
  geocoder = new GClientGeocoder();
}
function showLocation() {
  geocoder.getLocations(address1, function (response) {
    if (!response || response.Status.code != 200)
    {
      alert("Sorry, we were unable to geocode address 1");
    }
    else
    {
      location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
      geocoder.getLocations(address2, function (response) {
        if (!response || response.Status.code != 200)
        {
          alert("Sorry, we were unable to geocode address 2");
        }
        else
        {
          location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
          calculateDistance();
        }
      });
    }
  });
}
function calculateDistance()
{
  try
  {
    var glatlng1 = new GLatLng(location1.lat, location1.lon);
    var glatlng2 = new GLatLng(location2.lat, location2.lon);
    var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
    var kmdistance = (miledistance * 1.609344).toFixed(1);
    //Write the value wherever you want!
    $('#mile_distance').html(miledistance);
  }
  catch (error)
  {
    alert(error);
  }
}
price = $('#price').val();
delivery = $('#delivery').val();
var miles = mile_distance - 25;
if (miles<0)
{
 miles = 0;
}
var C = (miles * .575);
$('#price').val(C.toFixed(2));
var delivery_cost = 10;
var D = (delivery_cost + price);
$('#delivery').val(D.toFixed(2));
</script>

<form id="map-form">
  <input type="text" placeholder="Address 1" id="address1" />
  <input type="text" placeholder="Address 2" id="address2" />
  <input type="submit" value="Submit" />
</form>

<p>The distance is: <span id="mile_distance">?</span> miles</p>

<p>Your delivery cost is: $<span id="delivery">?</span> </p>
</font>

Answer 1

以下代码不是任何功能的一部分，因此，即使在您的GUI完全出现在屏幕上之前，也将在加载后立即执行。

price = $('#price').val();
delivery = $('#delivery').val();
var miles = mile_distance - 25;
if (miles < 0) {
  miles = 0;
}
var C = (miles * .575);
$('#price').val(C.toFixed(2));
var delivery_cost = 10;
var D = (delivery_cost + price);
$('#delivery').val(D.toFixed(2));