如何使用javascript中的选择选项值计算票价？

When I calculating the total fare by distance based on which option will be selected, Total distance is calculated but total fare giving the output 'NaN'. anyone give me suggestions on it, how will calculate the total fare? In output 'distance' & 'fixed charge' is displaying but 'rate' and 'total fare' not calculating. Anyone can suggest me where is the error in my code?

I already tried assigned the values inside the select option.

<?php $fix="200"; ?>

<script>
  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        computeTotalDistance(response);
      } else {
        alert('No route found');
      }
    });
  }

  function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
      total += myroute.legs[i].distance.value;
    }
    total = total / 1000;
    /*Start Calculating Distance Fair*/
    if (document.getElementById('cartype').value == "1") {
      var num1 = 18;
      var cost = ((total * num1) + (<?php echo $fix; ?>));
    }
    if (document.getElementById('cartype').value == "2") {
      var num1 = 20;
      var cost = ((total * num1) + (<?php echo $fix; ?>));
    }
    if (document.getElementById('cartype').value == "3") {
      var num1 = 30;
      var cost = ((total * num1) + (<?php echo $fix; ?>));
    }
    if (document.getElementById('cartype').value == "4") {
      var num1 = 15;
      var cost = ((total * num1) + (<?php echo $fix; ?>));
    }
    var fare = Math.round((cost * 100) / 100);
    /*Distance Fair Calculation Ends*/

    document.getElementById("total").innerHTML = "Distance:&nbsp" + total + " km <br>Rate:Rs. + num1 + /km <br>Fixed charge:Rs.<?php echo $fix; ?><br> <h5>Total:Rs. " + fare;
  }
</script>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <label for="email">Source:</label>
    <input type="text" class="form-control" id="start" value="<?php echo $_SESSION['pickup']; ?>">
  </div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <label for="pwd">Destination:</label>
    <input type="text" class="form-control" id="end" value="<?php echo $_SESSION['drop']; ?>">
  </div>
</div>

<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <label> Car Type </label>
    <select class="form-control" id="cartype">
      <option disabled selected value="" required>Select Car type</option>
      <option value="">LUXURY</option>
      <option value="">HATCHBACK</option>
      <option value="">SUV</option>
      <option value="">SEDAN</option>
    </select>
  </div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <input type="button" class="form-control btn-primary" value="Fare Calculate" onClick="calcRoute();">
  </div>
</div>
<div class="row">
  <div class="form-group col-md-8" id="total"></div>
</div>

It's showing

Distance: 572.936 km 
Rate:Rs. + num1 + /km 
Fixed charge:Rs.200
Total:Rs. NaN

I except calculating the total according to my given rate.

Try the following code

Possible Problems: $fix may be string and issue with cost initialization

  <script>
  var fixedPrice = <?php echo $fix; ?>;
  fixedPrice = fixedPrice ? parseInt(fixedPrice) : 0;

  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        computeTotalDistance(response);
      } else {
        alert('No route found');
      }
    });
  }

  function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
      total += myroute.legs[i].distance.value;
    }
    total = total / 1000;
    /*Start Calculating Distance Fair*/
    var cost = 0;
    if (document.getElementById('cartype').value == "1") {
      var num1 = 18;
      cost = (total * num1) + fixedPrice;
    }
    if (document.getElementById('cartype').value == "2") {
      var num1 = 20;
      cost = (total * num1) + fixedPrice;
    }
    if (document.getElementById('cartype').value == "3") {
      var num1 = 30;
      cost = (total * num1) + fixedPrice;
    }
    if (document.getElementById('cartype').value == "4") {
      var num1 = 15;
      cost = (total * num1) + fixedPrice;
    }
    var fare = Math.round((cost * 100) / 100);
    /*Distance Fair Calculation Ends*/

    document.getElementById("total").innerHTML = "Distance:&nbsp" + total + " km <br>Rate:Rs. + num1 + /km <br>Fixed charge:Rs. <?php echo $fix; ?><br> <h5>Total:Rs. " + fare;
  }

  </script>

and update select tag as follows (just give values to options)

<select class="form-control" id="cartype">
      <option disabled selected value="" required>Select Car type</option>
      <option value="1">LUXURY</option>
      <option value="2">HATCHBACK</option>
      <option value="3">SUV</option>
      <option value="4">SEDAN</option>
    </select>

The problem is that cost is never set - as hinted at by Ed Bangga - because setting that variable is dependent on the option values that are all empty.

<select class="form-control" id="cartype">
  <option disabled selected value="" required>Select Car type</option>
  <option value="">LUXURY</option>
  <option value="">HATCHBACK</option>
  <option value="">SUV</option>
  <option value="">SEDAN</option>
</select>

Your if statements:

if (document.getElementById('cartype').value == "1") {
  var num1 = 18;
  var cost = ((total * num1) + (<?php echo $fix; ?>));
}
if (document.getElementById('cartype').value == "2") {
  var num1 = 20;
  var cost = ((total * num1) + (<?php echo $fix; ?>));
}
if (document.getElementById('cartype').value == "3") {
  var num1 = 30;
  var cost = ((total * num1) + (<?php echo $fix; ?>));
}
if (document.getElementById('cartype').value == "4") {
  var num1 = 15;
  var cost = ((total * num1) + (<?php echo $fix; ?>));
}

These will never be true, so cost will never be set. Using an undefined variable here will indeed result in NaN:

var fare = Math.round((cost * 100) / 100);
//  fare = Math.round((undefined * 100) / 100)

Adding values 1-4 to your options should fix this. That said, I would change to a single switch statement instead of four ifs and include a default, or set the default cost beforehand.