NaN Fehler was ist falsch mit dem Code?

Question

Ich habe versucht, so viele Methoden konnten noch nicht herausfinden, warum diese Berechnung nicht durchläuft, ich benutze Google-Entfernung berechnen, um Entfernung zu berechnen und dann Tarif berechnen. jede Hilfe dazu würde sehr geschätzt werden.

<table border="0" cellpadding="0" cellspacing="3"> 
 
<tr> 
 
    <td colspan="2"> 
 
     Source: 
 
     <input type="text" id="txtSource" value="heathrow terminal 5" style="width: 300px" /> 
 
     &nbsp; Destination: 
 
     <input type="text" id="txtDestination" value="bath road, tw6" style="width: 300px" /> 
 
     <br /> 
 
     
 

 

 

 
     <input type="button" id="calufare" runat="server" value="Get Route" onclick="GetRoute()"/> 
 
     <hr /> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td colspan="2"> 
 
     <asp:Label ID="dvDistance" runat="server" Text=""></asp:Label> 
 
     <asp:Label ID="dvDuration" runat="server" Text=""></asp:Label> 
 
     <asp:TextBox ID="rate" runat="server" Text="2.5"></asp:TextBox> 
 
     <asp:Label ID="Fareid" runat="server" Text="Price£ "></asp:Label> 
 

 
     <script> 
 

 
      
 
     </script> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
     <div id="dvMap" style="width: 500px; height: 200px"> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div id="dvPanel" style="width: 500px; height: 200px"> 
 
     </div> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
 
<script type="text/javascript"> 
 
    var source, destination; 
 
    var directionsDisplay; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    google.maps.event.addDomListener(window, 'load', function() { 
 
     new google.maps.places.SearchBox(document.getElementById('txtSource')); 
 
     new google.maps.places.SearchBox(document.getElementById('txtDestination')); 
 
     directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': false }); 
 
    }); 
 

 
    function GetRoute() { 
 
     var heathrow = new google.maps.LatLng(51.4711620, -0.4523710); 
 
     var mapOptions = { 
 
      zoom: 7, 
 
      center: heathrow 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); 
 
     directionsDisplay.setMap(map); 
 

 
     //*    FOR PRICE CALCULATION       * // 
 

 

 
    
 

 

 

 

 

 
     //*********DIRECTIONS AND ROUTE**********************// 
 
     source = document.getElementById("txtSource").value; 
 
     destination = document.getElementById("txtDestination").value; 
 

 
     var request = { 
 
      origin: source, 
 
      destination: destination, 
 
      travelMode: google.maps.TravelMode.DRIVING 
 
     }; 
 
     directionsService.route(request, function (response, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
       directionsDisplay.setDirections(response); 
 
      } 
 
     }); 
 

 
     //*********DISTANCE AND DURATION**********************// 
 
     var service = new google.maps.DistanceMatrixService(); 
 
     service.getDistanceMatrix({ 
 
      origins: [source], 
 
      destinations: [destination], 
 
      travelMode: google.maps.TravelMode.DRIVING, 
 
      unitSystem: google.maps.UnitSystem.METRIC, 
 
      avoidHighways: false, 
 
      avoidTolls: false 
 
     }, function (response, status) { 
 
      if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") { 
 
       var distance = response.rows[0].elements[0].distance.text; 
 
       var duration = response.rows[0].elements[0].duration.text; 
 
       var dvDistance = document.getElementById("dvDistance"); 
 
       dvDistance.innerHTML = ""; 
 
       dvDistance.innerHTML += "Distance: " + distance + "<br />"; 
 
       var dvDuration = document.getElementById("dvDuration"); 
 
       dvDuration.innerHTML = ""; 
 
       dvDuration.innerHTML += "Duration:" + duration; 
 
       
 
       var distanceMeters = response.rows[0].elements[0].distance.value; 
 
       var rate = document.getElementById('Fareid').value; 
 

 
       rate=document.getElementById('Fareid').innerHTML = rate/1000 * distanceMeters; 
 

 
      } else { 
 
       alert("Unable to find the distance via road."); 
 
      } 
 
     }); 
 
    } 
 

 

 
</script>

Answer 1

Dieser Code Rückkehr ist keine Nummer:

var rate = document.getElementById('rate').value; 

Wenn Sie einen numerischen Wert für Rate und einen numerischen Wert für die Entfernung (wie response.rows[0].elements[0].distance.value; verwenden, welche die Entfernung in Metern) erhalten Sie eine numerische Antwort.

Das gibt mir ein Ergebnis:

var distanceMeters = response.rows[0].elements[0].distance.value; 
rate = 2.5; 
document.getElementById('Fareid').innerHTML = rate * distanceMeters;