尝试编写javascript以输出我的网站的交付成本，但代码不会显示值

这是我到目前为止的代码。有人把它贴出来供人们使用。它可以很好地计算距离，但当我试图计算我的配送成本时，它不会给我一个错误，但它也不会输出值。美元？保持不变。我没有太多的编码经验，我尝试过很多东西。我在这里不知所措。请帮忙

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

---

以下代码不是任何函数的一部分，因此，在加载后，甚至在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));

---

我的问题是交付计算在表单上方的底部。我真的被你的问题弄糊涂了，你到底想要什么？交付是span标记的id，span没有val属性。。。使用文本。我希望输出交付成本的最后一行代码实际输出一个值。当使用该程序时，它会输出距离供客户查看，但交付成本保持不变。交付成本没有任何价值输出，但我没有收到任何错误消息。老天，谢谢。我在这部电影里演了这么久都没看到。哈哈