javascript - 从javascript中的函数结果中提取元素

Question

我正在尝试将此代码块中名为“price”的元素（？）中的值获取到另一个脚本中，以用作自定义 Stripe Checkout 页面上的收费金额。

function CalculatedRecommendedDistance() {

CalculateDistanceforAllAlternativeRoutes();

var origin = document.getElementById('pick_up_address').value;
var destination = document.getElementById('drop_off_address').value;
var geocoder = new google.maps.Geocoder();
var service = new google.maps.DistanceMatrixService();

  service.getDistanceMatrix({

    origins: [origin],
    destinations: [destination],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false,
    avoidFerries: false

  }, function(response, status) {
    var originList = response.originAddresses;
    var destinationList = response.destinationAddresses;
    var outputDiv = document.getElementById('outputRecommended');
    outputDiv.innerHTML = '';

    //Display distance recommended value
    for (var i = 0; i < originList.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {

        outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
          ': ' + results[j].distance.text + ' in ' +
          results[j].duration.text + '<br>';

//Convert driving distance to price

          document.getElementById("price").innerHTML = booking_fee + base_fare + (rate_per_km * parseFloat(results[j].distance.text));

// The value that this statement produces is what I need ==> parseFloat(document.getElementById("price").innerHTML);

      }
    }
  });
}

或者更具体地说，此语句产生的值：

parseFloat(document.getElementById("price").innerHTML);

我尝试将以下内容以及许多变体放在同一脚本中以创建变量，但控制台中返回的结果始终为 NaN 或未定义。

var solution = document.getElementById("price").innerHTML = booking_fee + base_fare + (rate_per_km * parseFloat(results[j].distance.text));

这是完整的脚本：

<script>

var booking_fee = 0.50;
var base_fare = 1.50;
var rate_per_km = 1.30;
var outputDiv = document.getElementById('output');
var text = '3.14someRandomStuff';

var placeSearch, originautocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

function initAutocomplete() {

// Create the autocomplete object, restricting the search to geographical
// location types.

originautocomplete = new google.maps.places.Autocomplete(

/** @type {!HTMLInputElement} */

(document.getElementById('pick_up_address')), {
types: ['geocode']
});

// Set initial restrict to the greater list of countries.

originautocomplete.setComponentRestrictions({
'country': ['nz']
});

destinationautocomplete = new google.maps.places.Autocomplete(
(document.getElementById('drop_off_address')), {
types: ['geocode']
});

destinationautocomplete.setComponentRestrictions({
'country': ['nz']
});
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.

function geolocate() {

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}


function CalculatedRecommendedDistance() {

CalculateDistanceforAllAlternativeRoutes();

var origin = document.getElementById('pick_up_address').value;

var destination = document.getElementById('drop_off_address').value;

var geocoder = new google.maps.Geocoder();

var service = new google.maps.DistanceMatrixService();

  service.getDistanceMatrix({

    origins: [origin],

    destinations: [destination],

    travelMode: 'DRIVING',

    unitSystem: google.maps.UnitSystem.METRIC,

    avoidHighways: false,

    avoidTolls: false,

    avoidFerries: false

  }, function(response, status) {
    var originList = response.originAddresses;
    var destinationList = response.destinationAddresses;
    var outputDiv = document.getElementById('outputRecommended');
    outputDiv.innerHTML = '';


    //Display distance recommended value

    for (var i = 0; i < originList.length; i++) {

      var results = response.rows[i].elements;

      for (var j = 0; j < results.length; j++) {

        outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
          ': ' + results[j].distance.text + ' in ' +
          results[j].duration.text + '<br>';

//Convert driving distance to price

          document.getElementById("price").innerHTML = booking_fee + base_fare + (rate_per_km * parseFloat(results[j].distance.text));

// The value that this statement produces is what I need ==> parseFloat(document.getElementById("price").innerHTML);

      }
    }
  });
}

function CalculateDistanceforAllAlternativeRoutes() {
  var directionsService = new google.maps.DirectionsService();
  var start = document.getElementById('pick_up_address').value;
  var end = document.getElementById('drop_off_address').value;
  var method = 'DRIVING';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method],
    provideRouteAlternatives: true,
    unitSystem: google.maps.UnitSystem.METRIC,
    optimizeWaypoints: true
  };

  directionsService.route(request, function(response, status) {
    var routes = response.routes;
    var distances = [];
    for (var i = 0; i < routes.length; i++) {

      var distance = 0;
      for (j = 0; j < routes[i].legs.length; j++) {
        distance = parseInt(routes[i].legs[j].distance.value) + parseInt(distance);
        //for each 'leg'(route between two waypoints) we get the distance and add it to 
      }
      //Convert into kilometer
      distances.push(distance / 1000);
    }
      var maxDistance = distances.sort(function(a, b) {
      return a - b;
    });
    //Display distance having highest value.

    outputDiv.innerHTML = Math.round(maxDistance[routes.length - 1]) + " KM";
    });

}

</script>

非常感谢您提供的任何帮助。

标签： javascriptfunctionvariables