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

时间:2019-07-17 07:56:50

标签: javascript php html

当我根据要选择的选项来按距离计算总票价时,将计算总距离,但总票价会给出输出“ NaN”。有人给我建议吗,如何计算总票价?在输出中显示“距离”和“固定费用”,但不计算“费率”和“总票价”。任何人都可以建议我代码中的错误在哪里?

我已经尝试在select选项中分配值。

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

正在显示

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

除了按照给定的比率计算总数之外,我都是这样。

2 个答案:

答案 0 :(得分:0)

尝试以下代码

可能的问题:$fix可能是字符串,并且初始化cost时出现问题

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

并如下更新select标签(只需将值赋给选项)

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

答案 1 :(得分:0)

问题是cost从未设置过-正如Ed Bangga所暗示的-因为设置该变量取决于所有为空的选项值。

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

您的if语句:

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; ?>));
}

这些永远不会是正确的,因此永远不会设置成本。在此处使用未定义的变量确实会导致NaN

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

在选项中添加值1-4应该可以解决此问题。也就是说,我将更改为单个switch语句,而不是四个if并包含一个默认值,或者预先设置默认成本。