输入值始终等于0

Question

我正在安装计算，我想通过为每辆车使用特殊折扣来完成计算。如果我使用输入的domnpayment功能而不选中复选框，则由于变量finalVehiclePriceValue值等于0而以百分比表示的预付定金为Infinity时，总会弹出我的预付款大于95％，而finalVehiclePricePlusBuyBack变量具有自己的值。我哪里出错了？

$(function() {

  $('#priceVehicle').keyup(function() {
    var str = $(this).val();
    str = str.replace(/\D+/g, '');
    $(this).val(str.replace(/\d(?=(?:\d{3})+(?!\d))/g, '$& '));
  }); // end priceVehicle keyup

  $("#downPayment").on('keyup', function() {
    this.value = this.value.replace(/ /g, '');
    var number = this.value;
    this.value = number.replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  }); //end downPayment keyup

  var vehicleFinanceValue = parseInt($("input[name=vehicleFinanceValue]").val().replace(/ /g, '')) || 0,
    tradeInValue = parseInt($("input[name=tradeInValue]").val().replace(/ /g, '')) || 0,
    buyBackValue = parseInt($("input[name=buyBackValue]").val().replace(/ /g, '')) || 0,
    finalVehiclePriceValue = parseInt($("input[name=finalVehiclePriceValue]").val().replace(/ /g, '')) || 0,
    finalVehiclePricePlusBuyBack = parseInt($("input[name=finalVehiclePricePlusBuyBack]").val().replace(/ /g, '')) || 0;


  $("#listVehicle").change(function() {
    var listVehicle = $(this).val();

    vehicleFinanceValue = (listVehicle === "vehicleOne") ? 20000 :
      (listVehicle === "vehicleTwo") ? 10000 : 0;


    tradeInValue = (listVehicle === "vehicleOne") ? 20000 :
      (listVehicle === "vehicleTwo") ? 10000 : 0;




    buyBackValue = (listVehicle === "vehicleOne") ? 10000 :
      (listVehicle === "vehicleTwo") ? 10000 : 0


    console.log(vehicleFinanceValue);

    $("#vehicleFinanceValue").val(vehicleFinanceValue);
    $("#tradeInValue").val(tradeInValue);
    $("#buyBackValue").val(buyBackValue);

  }); // end change listVehicle


  $("input[name=priceVehicle]").change(function() {

    var vehiclePrice = parseInt($("input[name=priceVehicle]").val().replace(/ /g, '')) || 0,

      finalVehiclePriceValue = vehiclePrice;
    finalVehiclePricePlusBuyBack = vehiclePrice;

    $("input[name=finalVehiclePriceValue]").val($(this).val());
    $("input[name=finalVehiclePricePlusBuyBack]").val($(this).val());


    $("#priceVehicle").val(vehiclePrice);
    $("#finalVehiclePriceValue").val(finalVehiclePriceValue);
    $("#finalVehiclePricePlusBuyBack").val(finalVehiclePricePlusBuyBack);

    console.log(finalVehiclePriceValue);
    console.log(finalVehiclePricePlusBuyBack);


  }); // end priceVehicle change

  $('.salesCheckboxes input[type="checkbox"]').change(function() {

    var vehicleList = $("#listVehicle").val(),
      vehiclePrice = parseInt($("input[name=priceVehicle]").val().replace(/ /g, '')) || 0,
      vehicleFinance = $("input[name=vehicleFinance]"),
      tradeIn = $("input[name=tradeIn]");


    if (vehicleFinance.is(":checked") && vehicleList === "vehicleOne") {

      finalVehiclePriceValue = (vehiclePrice - vehicleFinanceValue);
      finalVehiclePricePlusBuyBack = (vehiclePrice - (vehicleFinanceValue + buyBackValue));

    } else if (tradeIn.is(":checked") && vehicleList === "vehicleOne") {

      finalVehiclePriceValue = (vehiclePrice - tradeInValue);
      finalVehiclePricePlusBuyBack = (vehiclePrice - (vehicleFinanceValue + tradeInValue + buyBackValue));

    } else {

      finalVehiclePriceValue = vehiclePrice;
      finalVehiclePricePlusBuyBack = vehiclePrice - buyBackValue;

    }


    $("#finalVehiclePriceValue").val(finalVehiclePriceValue.toLocaleString('ru-RU'));
    $("#finalVehiclePricePlusBuyBack").val(finalVehiclePricePlusBuyBack.toLocaleString('ru-RU'));

    console.log(finalVehiclePriceValue);

  }); // end salesCheckboxes

  $("input[name=downPayment").change(function() {

    var downPayment = parseInt($("input[name=downPayment]").val().replace(/ /g, '')) || 0;
    var downPaymentInPercent = parseInt($("input[name=downPaymentInPercent]").val());

    downPaymentInPercent = Number(((downPayment / finalVehiclePriceValue) * 100).toFixed(2));

    console.log(downPaymentInPercent);
    console.log(finalVehiclePriceValue);
    console.log(finalVehiclePricePlusBuyBack);
    console.log(downPayment);

    $("#downPaymentInPercent").val(downPaymentInPercent + "%");
    $("#downPaymentValue").html(downPayment.toLocaleString('ru-RU'));


    if (downPaymentInPercent < 10) {
      alert("downpayment must be greater than 10%");
    } else if (downPaymentInPercent > 95) {
      alert("downpayment must not be greater than 95%");
    }

  }); // end downPayment

}); // end function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset=" UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

    <div class="container-fluid" id="containerOne"> <!-- start container one fluid-->     
      <div class="row" id="modelAndPriceRow"> <!-- first row-->

          <div class="form-group">
            <label for="listVehicle">Choose:</label>
              <select class="form-control"  id="listVehicle">
                  <option value="0"></option>
                  <option value="vehicleOne">vehicleOne</option>
                  <option value="vehicleTwo">vehicleTwo</option>
                    </select>

                    <input type="text" name="vehicleFinanceValue"  id="vehicleFinanceValue" style="display:none">
                    <input type="text" name="tradeInValue"  id="tradeInValue" style="display:none">
                    <input type="text" name="buyBackValue"  id="buyBackValue" style="display:none ">
          </div>
     
          <div class="form-group">
            <label for="priceVehicle" id="priceVehicleLabel">Cost:</label>
              <input type="text " class="form-control " name="priceVehicle" id="priceVehicle" maxlength="8 ">
          </div>
      </div>

          <div class="row " id="financeAndTradeInBoxes"> <!--second row-->
            <div class="col-lg-9">
           <div class="form-group">
              <div class="salesCheckboxes">
                  <label class="checkbox-inline"> SALES
                    <input type="checkbox" name="vehicleFinance" id="vehicleFinance"> vehicleFinance
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tradeIn" id="tradeIn"> tradeIn
                  </label>
            </div>
          </div>
        </div>
        </div> <!-- end second row-->


        <div class="row">
        <div class="priceLabel">Vehicle price in</div>
      </div>
      <div class="row" id="priceBoxes">  <!-- third row-->
          <div class="form-group">
          <label for="finalVehiclePricePlusBuyBack">price1 </label>
            <input type="text " name="finalVehiclePricePlusBuyBack" id="finalVehiclePricePlusBuyBack" disabled>
        </div>
        <div class="form-group">
          <label for="finalVehiclePrice" id="finalVehiclePriceLabel" >price2 </label>
            <input type="text" name="finalVehiclePriceValue" id="finalVehiclePriceValue" disabled>
        </div> <!--  end third row-->
      </div> 
</div> 


<div class="container-fluid" id="containerTwo">
      <div class="form-group" id="fg1">
          <label for="downPayment"> downPayment:</label>
            <div class="row">
              <input type="text " class="form-control" name="downPayment" id="downPayment" maxlength="8">
              <input type="text" class="form-control" name="downPaymentInPercent" id="downPaymentInPercent"  disabled>

Answer 1

在阅读文档时，您具有：

var vehicleFinanceValue = parseInt($("input[name=vehicleFinanceValue]").val().replace(/ /g, '')) || 0,
  tradeInValue = parseInt($("input[name=tradeInValue]").val().replace(/ /g, '')) || 0,
  buyBackValue = parseInt($("input[name=buyBackValue]").val().replace(/ /g, '')) || 0,
  finalVehiclePriceValue = parseInt($("input[name=finalVehiclePriceValue]").val().replace(/ /g, '')) || 0,

然后在$("input[name=priceVehicle]").change(function() {中，您会看到令人困惑的格式：

var vehiclePrice = parseInt($("input[name=priceVehicle]").val().replace(/ /g, '')) || 0,

  finalVehiclePriceValue = vehiclePrice;
finalVehiclePricePlusBuyBack = vehiclePrice;

本质上是：

var vehiclePrice = ...
var finalVehiclePriceValue = vehiclePrice;
finalVehiclePricePlusBuyBack = vehiclePrice;

因此您要在此点击处理程序中创建一个 second 变量，并将其设置为正确的值，而不是外部定义的变量，该变量保持为零。

一个不错的IDE会为您解决这个问题，或者通过jslint传递，甚至使用严格模式。

---

我的建议是每个var仅声明一个变量，即：

var vehicleFinanceValue = parseInt($("input[name=vehicleFinanceValue]").val().replace(/ /g, '')) || 0;
var tradeInValue = parseInt($("input[name=tradeInValue]").val().replace(/ /g, '')) || 0;
var buyBackValue = parseInt($("input[name=buyBackValue]").val().replace(/ /g, '')) || 0;
var finalVehiclePriceValue = parseInt($("input[name=finalVehiclePriceValue]").val().replace(/ /g, '')) || 0;

然后，当您犯此错误时，它将（更加）明显：

 var vehiclePrice = parseInt($("input[name=priceVehicle]").val().replace(/ /g, '')) || 0;

 var finalVehiclePriceValue = vehiclePrice;  // <-- clearly shouldn't be `var ..`
 finalVehiclePricePlusBuyBack = vehiclePrice;